慕粉3207663
2016-06-09 14:04
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>无标题文档</title>
<style type="text/css">
body,div,span{
margin:0;
padding:0;}
#div1{
width=200px;
height=200px;
background:blue;
position:relative;
left:-200px;
top:0;}
#div1 span{
width=20px;
height=20px;
background:red;
position:absolute;
left:200px;
top:75px;}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById("div1");
oDiv.onmouseover=function() {
startMove(0);}
oDiv.onmouseout=function() {
startMove(-200);}
}
var timer=null;
function startMove(iTarget){
clearInterval(timer);
var oDiv=document.getElementById("div1");
timer=setInterval(function(){
var speed=0;
if(oDiv.offsetLeft>iTarget){
speed=-10;
}else{
speed=10;}
if(oDiv.offsetLeft==iTarget){
clear(timer)}
else{
oDiv.style.left=oDiv.offsetLeft+speed+'px'; }
},30 )
}
</script>
</head>
<body>
<div id="div1"> <span id="share">分享</span> </div>
</body>
</html>
应该将width=200px;height=200px;width=20px;height=20px;改写成width:200px;height:200px;
clear(timer);应写成clearInterval(timer)
你用firebug查看的时候,会有错误提示的;虽然不影响结果,我们尽量减少失误
JS动画效果
113925 学习 · 1443 问题
相似问题