为了账号安全,请及时绑定邮箱和手机立即绑定

缓冲动画的问题

我的代码错在哪里?

<title>无标题文档</title>

<style>

body,div,span{

margin:0;

padding:0;

}

#div1{

width:200px;

height:200px;

background:red;

position:relative;

left:-200;

top:0;

}

#div1 span {

width:20px;

height:50px;

background:blue;

position:absolute;

left:200px;

top:75pz;

}

</style>

<script>

//alert(Math.floor(3.98))

//alert(Math.ceil(3.45))

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 =(iTarget-oDiv.offsetLeft)/10;

speed=speed>0? Math.ceil(speed):Math.floor(speed);

}

if(oDiv.offsetLeft==iTarget){

clearInterval(timer);

}

else{

oDiv.style.left=oDiv.offsetLeft+speed+'px';

}

},30)

</script>

</head>


<body>

<div id="div1"><span id="share">分享</span></div>

</body>

</html>

为什么总是显示这样的呢?

http://img1.sycdn.imooc.com//581919530001ad5207860137.jpg

正在回答

2 回答

 function startMove(iTarget){

clearInterval(timer);

var oDiv=document.getElementById('div1');

   timer=setInterval(function(){

var speed =(iTarget-oDiv.offsetLeft)/10;

speed=speed>0? Math.ceil(speed):Math.floor(speed);

}                               ------------这个花括号去掉

if(oDiv.offsetLeft==iTarget){

clearInterval(timer);

}

else{

oDiv.style.left=oDiv.offsetLeft+speed+'px';

}

},30)

     《《   -----------------这个地方加上花括号

还有上面的div样式里left:-200加上单位px;

1 回复 有任何疑惑可以回复我~
#1

amily52000 提问者

非常感谢!
2016-11-03 回复 有任何疑惑可以回复我~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

这段代码是得用二个尖括号包起来的!!!

1 回复 有任何疑惑可以回复我~
#1

amily52000 提问者

非常感谢
2016-11-03 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
JS动画效果
  • 参与学习       113931    人
  • 解答问题       1443    个

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

进入课程

缓冲动画的问题

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信