問題在哪？動態功能表列-------Day86

標籤：前端   學習記錄   移動   menu   

今天做了一個動態功能表列，先片，簡單說一下我想實現的效果：

就是下面這個地方，隨著滑鼠指到哪，它就划到哪，並有一個慣性的幅度，而且滑動距離越遠，停住的時候慣性越大，擺動幅度越大，這就是我大概想實現的效果。

這樣我再上一下代碼：

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;//當前listage = 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";}}

慣性的抖動效果，在前面做掉落抖動的效果的時候曾經碰到過，但是這次效果時管時不管，問題究竟在哪呢，實在有些困了，先睡，有大神路過的話請不吝賜教啊。

多希望可以有那麼一個地方，明媚卻不憂傷