为什么我写的老是左右晃动啊
qq_鬼鬼鱼_0
2015-08-05 15:39
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>速度动画</title>
<style type="text/css">
*{margin:0;padding:0;}
#div1{
width:200px;
height:100px;
background:#0F3;
position:relative;
left:-200px;
cursor:pointer;}
#div1 span{
display:block;
height: 46px;
position: absolute;
right: -23px;
width: 23px;
top:20px;
text-align:center;
background:#F00;
}
</style>
<script type="text/javascript">
window.onload=function(){
var div1=document.getElementById("div1");
div1.onmouseover=function(){
startMove();
}
div1.onmouseout=function(){
returnMove();
}
}
function startMove(){
clearInterval(timer);
var div1=document.getElementById("div1"),
timer=null;
timer=setInterval(function(){
if(div1.offsetLeft==0){clearInterval(timer);}
else{div1.style.left=div1.offsetLeft+10+'px';}
},30);
}
function returnMove(){
clearInterval(timer);
var div1=document.getElementById("div1"),
timer=null;
timer=setInterval(function(){
if(div1.offsetLeft== -200){clearInterval(timer);}
else{div1.style.left=div1.offsetLeft-10+'px';}
},30);
}
</script>
</head>
<body>
<div id="div1">
<span>分享</span>
</div>
</body>
</html>
1回答
-
- claudio
- 2015-08-10 01:04:52
timer 应该设为全局变量 startMove 与 returnMove 共用
JS动画效果
113925 学习 · 1443 问题
相似问题
回答 2
回答 1