Heim > Artikel > Web-Frontend > So implementieren Sie den gleitenden Navigationseffekt in js

So implementieren Sie den gleitenden Navigationseffekt in js

王林nach vorne: 2020-03-23 10:40:552161Durchsuche

Schauen wir uns zunächst den Effekt an:

Die Wolke folgt der Bewegung der Maus, klicken Sie, um sie zu beheben.

So implementieren Sie den gleitenden Navigationseffekt in js

(Empfohlenes Tutorial: js-Tutorial)

Der spezifische Code lautet wie folgt:

<!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>

Cooler CSS3, HTML5, Javascript-Spezialeffektcodes, alles in: JS-Spezialeffektsammlung

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den gleitenden Navigationseffekt in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:jb51.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：So implementieren Sie die Auswahl eines Dropdown-Felds in jsNächster Artikel：So implementieren Sie die Auswahl eines Dropdown-Felds in js

In Verbindung stehende Artikel

Mehr sehen