今天做了一个动态菜单栏,先上图片,简单说一下我想实现的效果:
就是下面这个地方,随着鼠标指到哪,它就划到哪,并有一个惯性的幅度,而且滑动距离越远,停住的时候惯性越大,摆动幅度越大,这就是我大概想实现的效果。
这样我再上一下代码:
html部分:
<center> <div id="menu"> <ul id="book" onmouseover="choose(event)"> <li class="selected"><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> <li><a href="#">都市</a></li> <li><a href="#">历史</a></li> <li id="bar"></li>//这个地方的实现是跟我自己想的有些出入的,但是发现还是这个好 </ul> </div> </center>
CSS部分:
* { margin:0; padding:0; } body { width:100%; height:100%; overflow:auto; } ul{width:800px;position:relative;margin-top:100px;background:grey;height:30px;} li{width:70px;height:30px;line-height:30px;border-radius:10px;float:left;margin-left:20px;background:#fff0f0;position:relative;z-index:2;list-style:none;} a{text-decoration:none;} .selected{font-weight:bold;background:#ccc;} #bar{padding-bottom:0px;width:70px;height:5px;z-index:4;position:absolute;background:red;bottom:-10px;}//这个地方bottom为负的
js部分:
var ulpart=null;//ul部分 var eachli=null;//li部分 var slide=null;//滑动部分 var speed=0;//移动速度 var fudu=7;//最后停下来时的惯性幅度 var move=null;//移动 var begin = 0;//开始的li部分 var stage = 0;//移动滑过li的个数 var now = 0;//当前的li部分
window.onload=function(){ ulpart=document.getElementById("book"); //获取ul对象 eachli=ulpart.getElementsByTagName("li");//获取li对象 slide=document.getElementById("bar");//获取滑动模块对象 for(var i=0;i<eachli.length;i++){ if(eachli[i]!=slide){ eachli[i].onmouseover=change; } } }
function change(){ for(var i=0;i<eachli.length;i+=1){ if(eachli[i]===this){//这个地方的this实在是妙啊,好用 var target=(eachli[i].offsetWidth+20)*i;//当前li的左边距第一个li的左边的距离,20为li之间距离 now=i;//当前li stage = parseInt(now - begin);//要移动的方向,正的是向右,负的是向左 if(move){ clearInterval(move); } if(stage>0){ move=setInterval("go("+target+")",30);//右移 }else{ move=setInterval("back("+target+")",30);//左移 } begin=now;//将当前位置该为初始位置 } eachli[i].className=""; this.className="selected"; } }
function go(target){ var left=slide.offsetLeft; speed+=fudu; left+=speed;//移动速度加快的同时,距离变远 if(left>=target){//一旦超出距离 speed*=-1;//惯性抖动效果,这个效果也时管时不管,问题在哪呢? if(Math.abs(speed)<=fudu){ clearInterval(move); move=null; } left=target; } slide.style.left=left+"px"; }
function back(target){ if(slide.offsetLeft===target){ clearInterval(move); move=null; }else{ speed=(target-slide.offsetLeft)/5; slide.style.left=slide.offsetLeft+speed+"px"; } }
惯性的抖动效果,在前面做掉落抖动的效果的时候曾经碰到过,但是这次效果时管时不管,问题究竟在哪呢,实在有些困了,先睡,有大神路过的话请不吝赐教啊。
多希望可以有那么一个地方,明媚却不忧伤
问题在哪?动态菜单栏-------Day86,布布扣,bubuko.com
时间: 2024-10-19 02:58:57