主要是速度以及临界条件的处理弹性运动的函数
function startMove(obj,target) { clearInterval(obj.timer); var speed=0; obj.timer = setInterval(function() { speed += (target - obj.offsetLeft) / 6; //类似于摩擦系数 speed *= 0.75; if(Math.abs(speed) < 1 && Math.abs(target - obj.offsetLeft) < 1) { clearInterval(obj.timer); obj.style.left = target; speed = 0; } else { obj.style.left = obj.offsetLeft + speed + ‘px‘; } // console.log(obj.offsetLeft + ‘/‘ + speed); }, 30); }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="../css/public.css"/> <style> #list{width: 450px;height: 40px;margin: 100px auto;position: relative;} #list li.box{width: 100px;height: 40px;line-height: 40px;text-align: center;border: 1px solid #999;float: left;margin-right: 10px;background: red;} #mark{width: 101px;height: 42px;background: green;position: absolute;top: 0;left: 0;} </style> <script type="text/javascript" src="../js/rainbow.js"></script> <script type="text/javascript"> window.onload=function(){ var oUl=document.getElementById("list"); var oMark=document.getElementById("mark"); var aBox=getElementsByClassName(document,‘li‘,‘box‘); var timer=null; for(var i=0;i<aBox.length;i++){ aBox[i].onmouseover=function(){ clearTimeout(timer); startMove(oMark,this.offsetLeft); }; aBox[i].onmouseout=function(){ timer=setTimeout(function(){ startMove(oMark,0); },100); } } oMark.onmouseover=function(){ clearTimeout(timer); }; oMark.onmouseout=function(){ startMove(oMark,0); } } </script> </head> <body> <ul id="list"> <li id="mark"></li> <li class="box">首页</li> <li class="box">论坛</li> <li class="box">体育</li> <li class="box">新闻</li> </ul> </body> </html>
时间: 2024-10-27 06:04:17