<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>多物体运动框架</title> <style> #div1 { width: 100px; height: 50px; background-color: red; margin-top:50px; } </style> <script type="text/javascript"> window.onload=function() { var oDiv = document.getElementById('div1'); oDiv.onmouseover=function() { startMove(300); } oDiv.onmouseout=function() { startMove(100); } } var timer = null; function startMove(iTarget)//这个函数 { var oDiv = document.getElementById('div1'); clearInterval(timer); timer=setInterval(function () { var iSpeed = (iTarget - oDiv.offsetwidth)/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); if(oDiv.offsetWidth == iTarget) { clearInterval(timer); } else { oDiv.style.width = oDiv.offsetWidth + iSpeed + 'px'; } },30) } </script></head><body> <div id="div1"></div></body></html>
添加回答
举报
0/150
提交
取消