Maison > Article > interface Web > Comment implémenter l'effet de navigation glissante dans js

Comment implémenter l'effet de navigation glissante dans js

王林avant: 2020-03-23 10:40:552207parcourir

Tout d'abord, regardons l'effet :

Le nuage suit le mouvement de la souris, cliquez pour le fixer.

Comment implémenter leffet de navigation glissante dans js

(Tutoriel recommandé : tutoriel js)

Le code spécifique est le suivant :

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

Plus cool CSS3, html5, codes d'effets spéciaux javascript, le tout dans : collection d'effets spéciaux js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment implémenter la sélection par liste déroulante dans jsArticle suivant：Comment implémenter la sélection par liste déroulante dans js

Articles Liés

Voir plus