太阳会发光呀
2019-03-01 20:53
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>速度动画</title>
<style type="text/css">
*{margin: 0;padding: 0}
#big {height: 200px;width:200px;background-color: red;position: relative;left: -200px;top: 10px}
#big span{height: 20px;width:50px;background-color: blue;position: absolute;cursor: pointer;top: 85px;left:200px;}
</style>
<script>
var timer=null;
var speed=0;
window.onload=function(){
var start=document.getElementById("s");
start.onmouseover=function(){
forth(0);
}
start.onmouseout=function(){
back(-200);
}
}
function forth(target){
clearInterval(timer);
var big=document.getElementById("big");
timer=setInterval(function(){
if(big.offsetLeft<target){
speed=10;
}
else{
speed=-10;
}
if(big.offsetLeft==target){
clearInterval(timer);
}
else{
big.style.left=big.offsetLeft+speed+'px';
}
},50)
}
function back(target){
clearInterval(timer);
var big=document.getElementById("big");
timer=setInterval(function(){
if(big.offsetLeft<target){
speed=10;
}
else {
speed=-10;
}
if(big.offsetLeft==target){
clearInterval(timer);
}
else{
big.style.left=big.offsetLeft+speed+'px';
}
},50)
}
</script>
</head>
<body>
<div id="big"><span id="s">开始</span></div>
</body>
</html>
鼠标移入蓝色部分物体开始运动,但是当蓝色部分将要离开鼠标的时候(鼠标不动,物体向前运动)就不向前了,就开始向前向后患者来????
你的鼠标移入移出事件是绑定在蓝色部分的,而蓝色部分是包含在div里的;你换成绑定在big上 就好了
JS动画效果
113925 学习 · 1443 问题
相似问题