JavaScript事件应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js事件应用</title>
</head>
<style>
#div1 {
width: 500px;
height: 100px;
background: cyan;
position: absolute;
left: -500px;
}
#div1 span
{
width: 20px;
height: 100px;
background: red;
position: absolute;
top: 0px;
right: -20px;
}
</style>
<script>
window.onload=function (ev) {
var oDiv=document.getElementById('div1')
oDiv.onmouseover=function (ev2) {
startMove(0,this)
}
oDiv.onmouseout=function (ev2) {
startMove(-500,this)
}
}
var timer=null
function startMove(target,obj) {
clearInterval(timer)
timer=setInterval(function () {
var speed=(target-obj.offsetLeft)/10
speed=speed>0?Math.ceil(speed):Math.floor(speed)
obj.style.left=obj.offsetLeft+speed+'px'
document.title=obj.offsetLeft+'|'+speed
},30)
}
</script>
<body>
<div id="div1"><span>缓冲运动</span></div>
</body>
</html>