原素材
main.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <link href="main.css" rel="stylesheet"> 5 <script type="text/javascript" src=‘main.js‘></script> 6 <meta charset="utf-8"> 7 <title> 8 Document 9 </title> 10 </meta> 11 </link> 12 </head> 13 <body> 14 <div id="div1"> 15 </div> 16 </body> 17 </html>
main.js
window.onload = function() {
var odiv1 = document.getElementById(‘div1‘);//前面必须要是id的，如果为class就会报错
odiv1.onmouseover = function() {
startMove(700);
};
// odiv1.onmouseout = function() {
// startMove(0);
// };
};
var timer = null;//设置一个计时器
function startMove(iTarget) {
clearInterval(timer);//取消原有的计时器，防止叠加
var odiv1 = document.getElementById(‘div1‘);
timer = setInterval(function() {
var speed = (iTarget - odiv1.offsetLeft)/20;
speed=speed>0?Math.ceil(speed):Math.floor(speed);//取整
if (odiv1.offsetLeft == iTarget) {
clearInterval(timer);//当达到目标是，停止
} else {
odiv1.style.left = odiv1.offsetLeft + speed + ‘px‘;
}
}, 30);
}
main.css
* {
margin: 0;
padding: 0;
}
#div1 {
width: 480px;
height: 120px;
background:url(image/1.jpg) -440px -450px no-repeat;
position: relative;//这个是运动的前提
}
时间： 2024-10-26 19:57:52