JS实现滑动导航效果

更新时间：2020-09-30 03:24:01 作者：startmvc

本文实例为大家分享了JS实现滑动导航效果的具体代码，供大家参考，具体内容如下<!docty

本文实例为大家分享了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>

最终效果如下：云彩跟随鼠标移动，点击固定