移出的时候正常，移入的时候一直在幌
来源：2-1 JS速度动画
hedge__hog
2016-05-02 16:19
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS动画的学习</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
#div_share {
width: 200px;
height: 200px;
position: relative;
background-color: red;
left: -200px;
top: 200px;
}
#span_share {
width: 20px;
height: 40px;
background-color: blue;
position: absolute;
left: 200px;
top: 75px;
}
</style>
<body>
<div id="div_share">
<span id="span_share">分享</span>
</div>
<script type="text/javascript">
window.onload = function() {
var div_share = document.getElementById("div_share"); //快捷键：geti=getElementById
div_share.onmouseover = function() {
startMove(0);
}
div_share.onmouseout = function() {
startMove(-200);
}
var timmer = null;
function startMove(target) { //快捷键:fn 新建一个方法
clearInterval(timmer); //先清除以上的定时器
var div_share = document.getElementById("div_share"); //快捷键：geti=getElementById
//错误的地方timer = setInterval(function() { //快捷键：si 新建一个定时器
timmer = setInterval(function() { //快捷键：si 新建一个定时器
var speed = 0;
speed = div_share.offsetLeft > target ? -10 : 10;//三目运算比if else来的简单多了
if (div_share.offsetLeft == target) {
clearInterval(timmer);
} else {
div_share.style.left = div_share.offsetLeft + speed + "px";
}
}, 30);
}
}
</script>
</body>
</html>
写回答
关注
2回答
-
- 慕田峪8758219
- 2016-05-02 16:51:00
你的第53行
timer = setInterval(function() { //快捷键：si 新建一个定时器
用的是timer，但其他地方用的是timmer
-
- BerylS
- 2016-05-02 16:56:24
亲，第53行的timmer写成timer了
JS动画效果
通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装
113925 学习 · 1443 问题
相似问题