abstrakt：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js事件應(yīng)用</title></head><style> &n
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js事件應(yīng)用</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>緩沖運(yùn)動</span></div>
</body>
</html>
Korrigierender Lehrer：天蓬老師Korrekturzeit：2019-02-12 09:21:14
Zusammenfassung des Lehrers：obj.style.left=obj.offsetLeft+speed+'px'
style值是字符串, offset是數(shù)值,這個要注意