How to implement sliding navigation effect in js-JS Tutorial-php.cn

How to implement sliding navigation effect in js

王林

Release： 2020-03-30 11:24:53

forward

2225 people have browsed it

How to implement sliding navigation effect in js

First, let’s take a look at the effect:

The clouds follow the movement of the mouse, click to fix it.

How to implement sliding navigation effect in js

(Recommended tutorial: js tutorial)

The specific code is as follows:

<!doctype html>
<html>
<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 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$(&#39;ull&#39;).children;
 console.log(list);
 //获取到筋斗云图片
 var im=my$(&#39;cloud&#39;);
 //获取图片的宽度
 var imgWidth=im.offsetWidth;
 console.log(imgWidth);
 for(var i=0;i<list.length;i++){
  //设置index值用来储存移动的距离
  list[i].setAttribute(&#39;index&#39;,i);
  //遍历所有li，每个li绑定三个时间指向同一个函数f1
  list[i].onmouseover=f1;
  list[i].onmouseout=f1;
  list[i].onclick=f1;
  //实现函数f1
  function f1(e){
   switch(e.type) {
    case &#39;mouseover&#39;:
     //获取当前li的index值
     index=this.getAttribute(&#39;index&#39;);
     //调用变速移动函数
     movecs(im,imgWidth*index);
     break;
    case &#39;click&#39;:
     index=this.getAttribute(&#39;index&#39;);
     //点击之后固定
     im.style.left=imgWidth*index+&#39;px&#39;;
     //点击了其中一个li之后的操作，移开鼠标之后不会弹回去
     this.onmouseout=false;
     for(var k=0;k<list.length;k++){
      list[k].setAttribute(&#39;jndex&#39;,k);

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

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



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

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

Copy after login

More cool CSS3 , html5, javascript special effects code, all in: js special effects collection

The above is the detailed content of How to implement sliding navigation effect in js. For more information, please follow other related articles on the PHP Chinese website!