当前位置 主页 > 网站技术 > 代码类 > 最大化 缩小

    JS实现滑动导航效果

    栏目:代码类 时间:2020-01-14 18:09

    本文实例为大家分享了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" >
     <img  src="images/cloud.gif" alt="" />
     <ul >
      <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  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>
    
    下一篇:没有了