html 滑动导航效果,JS实现滑动导航效果

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

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Document

* {

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%);

}

• 长沙校区
• 长沙校区
• 长沙校区
• 长沙校区
• 长沙校区
• 长沙校区

//获取每一个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

//设置index值用来储存移动的距离

list[i].setAttribute('index',i);

//遍历所有li，每个li绑定三个时间指向同一个函数f1

list[i].οnmοuseοver=f1;

list[i].οnmοuseοut=f1;

list[i].οnclick=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.οnmοuseοut=false;

for(var k=0;k

list[k].setAttribute('jndex',k);

list[k].οnmοuseοver=function(){

jndex=this.getAttribute('jndex');

movecs(im,imgWidth*jndex);

};

list[k].οnmοuseοut=function(){

movecs(im,imgWidth*index);

};

}

break;

case 'mouseout':

index=0;

movecs(im,imgWidth*index);

break;

}

}

}

/*list[i].οnmοuseοver=function(){

index=this.getAttribute('index');

console.log(index);

movecs(im,imgWidth*index);

};

list[i].οnmοuseοut=function(){

index=0;

// im.style.left='0px';

movecs(im,imgWidth*index);

};

list[i].οnclick=function(){

index=this.getAttribute('index');

im.style.left=imgWidth*index+'px';

alert(index);

};*/

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。