<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多物体运动</title> <style> ul li{ width: 100px; height: 50px; background-color: yellow; margin-bottom: 10px; list-style: none; } </style> <script> window.onload=function () { var oli=document.getElementsByTagName("li"); for(var i=0;i<oli.length;i++){ oli[i].timer=null; oli[i].onmouseover=function () { startmove(this,120); }; oli[i].onmouseout=function () { startmove(this,100); } } function startmove(obj,itarget) { clearInterval(obj.timer); obj.timer=setInterval(function () { // var speed=(itarget-obj.offsetWidth)/8; var speed=speed>0?Math.ceil((itarget-obj.offsetWidth)/8):Math.floor((itarget-obj.offsetWidth)/8); console.log((itarget-obj.offsetWidth)/8); console.log('speed:'+speed+'width:'+obj.offsetWidth); if(obj.offsetWidth==itarget){ clearInterval(obj.timer); }else{ obj.style.width=obj.offsetWidth+speed+"px"; } },30) } } </script> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>
在后台consol.log查看后 和 注释 掉的 speed得到的结果不一样,即如果用speed则正常,如果使用Math.ceil((itarget-obj.offsetWidth)/8)则得到的结果却是 向下取整,即第一个值为120-100=2.5 ceil后应该是3但是在后台看确实2?!费解,请大神答疑,十分感谢
回头看了一下 是我粗心,抱歉各位,问题已解决