溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關JavaScript中怎么實現滑動導航效果，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
具體內容如下
<!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><p 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="" /></p><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>
以上就是JavaScript中怎么實現滑動導航效果，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
