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

JS动画效果

vivian Web前端工程师
难度初级
时长 2小时 8分
学习人数
综合评分9.60
537人评价 查看评价
9.8 内容实用
9.6 简洁易懂
9.4 逻辑清晰

已采纳回答 / 呆4
经过我的测试,可以这样理解,在执行第一个startmove中定时器里面的函数的时候是在设定的30ms后才会执行第一次定时器里面的函数,但之后的程序仍然会继续执行,所以这时就会继续执行下一个startmove函数,而下一个startmove的第一步就是clearinterval,所以你会发现,第一个startmove的定时器中的函数其实根本就没有执行,宽度根本一次都没变,第一个startmove中的定时器在还没有等到30ms开始执行的时候就已经被clearinterval了,所以你会感觉是第一个没执行完就开...

已采纳回答 / 之芭
加parseInt试试看

已采纳回答 / michael88
当属性为变量时,只能用[],不能用.操作

已采纳回答 / 大丑鸭
第33行和第36行的obj应该是使用形参的abj对象

已采纳回答 / 慕容6759333
<...code...>第四行offsetLeft没打对!

已采纳回答 / kaiyanghll
 function getStyle(obj,attr){     if(obj.currentStyle){ return obj.currentStyle[attr]; } else{       return getComputedStyle(obj,false)[attr];   }  }  function startMove(obj,iTarget,attr,fn){        clearInterval(obj.timer);  ...

已采纳回答 / witchy
你for循环少写了花括号吧 没有括起来

已采纳回答 / wanoneQ
第八行 oar=getStyle(obj,attr)*100;中getStyle(obj,attr)需要用parseFloat()函数转换为数字,再四舍五入提高准确度。oar=Math.round( parseFloat( getStyle(obj,attr) )*100);另外你的速度有问题,建议提高精确度采用缓冲动画,防止边缘抖动。

已采纳回答 / Betsey
第44行的attr没有定义,应该把attr换成'width',因为attr是在getStyle()里面的局部变量,离开了getStyle()就会销毁

已采纳回答 / 慕容6759333
比如移动到的目标值是300px,通过300减去当前的坐标0,再除以20,结果是15,div以15的速度向右移动,这是第一次定时器执行的结果。30毫秒后再执行一次,目标移动到了15,通过300减去当前坐标15结果是285,285除以20结果的14.25,这样一次次运算下来,速度越来越小,比如速度是15、14.25、12.73、7.2。。。。这样的。由于数值设置的原因,div移动到一定px后,进行相减再除20的运算后会出现小数,比如0.75,比如这时div移动到了290,程序里写到div的left=oDiv....

已采纳回答 / hiccup_dai
<script type="text/javascript"> $(function(){ $('#move a').mouseenter(function(){ $(this).find('i').animate({top:"-25px",opacity:"0"},300,function(){ $(this).css({top:"30px"}); $(this).animate({top:"20px",opacity:"1"},200) }) ...

已采纳回答 / haoyuanlin
可能是封装的函数里面高度达到了然后使得动画停止了,看看startMove里面判断动画停止的时候是否正确

已采纳回答 / 小感冒
复制了一下你的代码测试了一下,应该是停在-190.5这个数的。原因我理解的是这样的:因为-190.5还差-9.5就达到了-200,但是如果在进行运算的话,就是比-200小了。好比10/3,结果是3余1,永远会留下一个1,这个1就相当于上面所说的-9.5.
课程须知
1.您至少已经具备JavaSript的知识。2.您已经具备一些开发经验。
老师告诉你能学到什么?
1.使用定时器实现简单动画。2.如何一步步封装库。2.培养编程的思想。

微信扫码,参与3人拼团

微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消