如何利用js实现滑动导航的效果?为了大家让大家更加了解js实现滑动,小编给大家总结了以下内容,一起往下看吧。
创新互联专注于宝塔网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供宝塔营销型网站建设,宝塔网站制作、宝塔网页设计、宝塔网站官网定制、小程序开发服务,打造宝塔网络公司原创品牌,更为您提供宝塔网站排名全网营销落地服务。
首先,我们来看一下效果:
云彩跟随鼠标移动,点击固定。
具体代码如下:
<!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$('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>
看完上诉内容,你们对如何利用js实现滑动导航的效果大概了解了吗?如果想了解更多,欢迎关注创新互联行业资讯频道哦!
新闻标题:如何利用js实现滑动导航的效果
网站网址:https://www.cdcxhl.com/article26/gsjejg.html
成都网站建设公司_创新互联,为您提供建站公司、品牌网站制作、软件开发、微信小程序、移动网站建设、定制开发
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联