为什么我的moveout函数没有实现呢
阿山啊
2016-07-11 16:46
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js动画框架1</title>
<style type="text/css">
span {}
.big {
height: 100px;
width: 200px;
background-color: red;
position: absolute;
left: -200px;
}
.share {
height: 50px;
width: 20px;
background-color: deepskyblue;
margin-left: 200px;
display: block;
font-family: "微软雅黑";
padding: 5px;
}
</style>
</head>
<body>
<div class="big" id="big"><span class="share">分享</span></div>
<script type="text/javascript">
window.onload = function() {
var mdiv = document.getElementById("big");
mdiv.onmouseover = function() {
startmove(mdiv,0);
}
mdiv.onmouseout = function() {
startmove(mdiv,-100);
}
}
var timer = null;
function startmove(div,its) {
clearInterval(timer);
// var mdiv = document.getElementById(div);
timer = setInterval(function() {
var speed = 0;
if (div.OffsetLeft > its) {
speed = -10;
} else {
speed = 10;
}
if (div.offsetLeft == its) {
clearInterval(timer);
} else {
div.style.left = div.offsetLeft + speed + 'px';
}
}, 30)
}
</script>
</body>
</html>
2回答
-
- weibo_一万群什麼_0
- 2016-07-12 12:56:03
if (div.OffsetLeft > its) { speed = -10; } else { speed = 10; }这一句的offsetLeft被你写成了OffsetLeft.o应该是小写的.
还有运行之后会发现div在鼠标移开后收进去到一半会被卡住,因为你的its应该是-200而不是-100.
-
- qq_如果的事_0
- 2016-07-12 15:31:27
if (div.OffsetLeft > its) {
speed = -10;
} else {
speed = 10;
}
OffsetLeft 把o改成小写
JS动画效果
113925 学习 · 1443 问题
相似问题
回答 3
回答 1
回答 3
回答 4
回答 1