1. 程式人生 > >原生JS實現滑動導航

原生JS實現滑動導航

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        ul {
            list-style-type: none;
            height: 42px;
            position: absolute;
        }
        img {
            vertical-align: middle;
        }
        li,
        a {
            cursor: pointer;
        }
        a {
            text-decoration: none;
            color: #000000;
            display: block;
        }
        li {
            width: 83px;
            height: 42px;
            /*background-color: pink;*/
            float: left;
            text-align: center;
            line-height: 42px;
        }
        .box {
            position: relative;
            width: 530px;
            height: 42px;
            border: 1px solid deepskyblue;
            margin: 100px auto;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
        }
        .box img#cloud {
            width: 83px;
            height: 42px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .box img#xinhao {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
<div class="box" id="box">
    <img id="cloud" src="images/cloud.gif" alt="" />
    <ul id="ull">
        <li><a href="#">長沙校區</a></li>
        <li><a href="#">長沙校區</a></li>
        <li><a href="#">長沙校區</a></li>
        <li><a href="#">長沙校區</a></li>
        <li><a href="#">長沙校區</a></li>
        <li><a href="#">長沙校區</a></li>
    </ul>
    <img id="xinhao" src="images/rss.png" alt="" />
</div>
<script src="js/common.js"></script>
<script src="js/changespead.js"></script>
<script>
    //獲取每一個li
    var list=my$('ull').children;
    console.log(list);
    //獲取到筋斗雲圖片
    var im=my$('cloud');
    //獲取圖片的寬度
    var imgWidth=im.offsetWidth;
    console.log(imgWidth);
    for(var i=0;i<list.length;i++){
        //設定index值用來儲存移動的距離
        list[i].setAttribute('index',i);
        //遍歷所有li,每個li繫結三個時間指向同一個函式f1
        list[i].onmouseover=f1;
        list[i].onmouseout=f1;
        list[i].onclick=f1;
        //實現函式f1
        function f1(e){
            switch(e.type) {
                case 'mouseover':
                    //獲取當前li的index值
                    index=this.getAttribute('index');
                    //呼叫變速移動函式
                    movecs(im,imgWidth*index);
                    break;
                case 'click':
                    index=this.getAttribute('index');
                    //點選之後固定
                    im.style.left=imgWidth*index+'px';
                    //點選了其中一個li之後的操作,移開滑鼠之後不會彈回去
                    this.onmouseout=false;
                    for(var k=0;k<list.length;k++){
                        list[k].setAttribute('jndex',k);

                        list[k].onmouseover=function(){
                            jndex=this.getAttribute('jndex');
                            movecs(im,imgWidth*jndex);
                        };
                        list[k].onmouseout=function(){
                            movecs(im,imgWidth*index);
                        };
                    }
                    break;
                case 'mouseout':

                    index=0;
                    movecs(im,imgWidth*index);
                    break;
            }
        }
    }



    /*list[i].onmouseover=function(){
            index=this.getAttribute('index');
            console.log(index);
            movecs(im,imgWidth*index);
        };
        list[i].onmouseout=function(){
            index=0;
            // im.style.left='0px';
            movecs(im,imgWidth*index);
        };

        list[i].onclick=function(){
            index=this.getAttribute('index');
            im.style.left=imgWidth*index+'px';
            alert(index);
        };*/
</script>
</body>
</html>

最終效果如下:雲彩跟隨滑鼠移動,點選固定
在這裡插入圖片描述