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

JS动画效果

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

已采纳回答 / 飞舞的墨
这两次定义的odiv的作用域都是在各自的函数体内。也就是startMove()是获取不到onload的匿名函数中定义的odiv.如果你想只定义一次,那就将odiv定义成全局变量,这个页面的任何函数都可以直接获取的到。

最新回答 / TOTO晶
var flag=true;  及for(var attr in json) 应该放在定时器n内, json的for循环之前if(flag){清除定时器和fn回调}应该放在定时器n内, json的for循环之后具体解释可以参考<JS动画效果课程 6-2小节>的评论区讨论,希望能帮到你更改后的参考code如下(未贴上来的其他code不变):<...code...>

最新回答 / 慕粉3498277
虽然有点久了,不过最近正好刚弄懂了这个问题,希望能对你有帮助!这里要提到offsetLeft与style.left的一点区别。style.left是读写的,offsetLeft是只读的,所以要改变div的位置,只能修改style.left。(1)确实是只有设置为行间样式的style属性才能被获取(读),但这里我们用到的是style的‘写’,所以不矛盾。(2)你可以试一下,把上面的if(Obj.offsetLeft==0)改为if(Obj.style.left==0),会发现没有任何效果,就是因为这里要用到...

已采纳回答 / 吃瓜神教_03349355
在div1的css里面设置z-index的值,大于0就能覆盖,等于0就是你现在的情况。

已采纳回答 / 飞天意大利面神兽
首先是第34行改成<script type="text/javascript">再就是,第45行,那个magin-left在js不是这么用的,而是magrinLeft.

已采纳回答 / TOTO晶
鼠标移出时,aph是从100一直减小变到30,此时,aph=100大于目标值isp=30,speed为-10,并不是鼠标开始移出时aph就是30
将if(fn){fn}写在if(icor == iTarget){}的外面就能实现同时运动。因为上一节中fn()只有在上一个运动结束才能开启,但是写在外面就能同时开启多个定时器。

已采纳回答 / cici_0008
animate 是jquery封装好的方法。这里是用原生自己写的

最赞回答 / weibo_慕丝7400593
在startMove函数执行时,启动清除所有的定时器.function startMove(){ clearInterval(timer);...}
老师的声音简直和 杨紫 一模一样!
按照老师的写法,同时运动确实可以执行,但是链式运动不能执行,因为没有把flag进行复位,所以只会执行第一套运动。
特别赞同 @Barry0 的说法,应该把flag=true定义在定时器之内,for循环之前,这样才能保证物体所有的同时运动都达到最终效果,然后再将清除定时器和执行回调函数放在定时器之内,for循环之后。
不同意 @Desoer 的说法,不能把flag=true放在for-in循环中,因为定时器每30ms就会执行一次,而每次执行定时器都会遍历一遍json对象。
真心就觉得jquery方便啊
1、flag=true,应该立在定时器内,json的for遍历前;
2、if(flag){clearInterval(obj.timer);if(fn){fn()}}应该放在定时器内,json的for遍历后;
因为当三个iCur==json[attr],flag==false,之后一次执行定时器时,会将flag变为true,则变成true状态,for遍历中的结果并不会被执行,等于空运行一次for遍历后,true被带到if(flag){if(fn){fn()}},中执行关闭定时器和fn(),如果吧if(flag){...}放在for遍历中,最后fn()会被执行三次,for遍历的特性
老师程序里立的flag没有起到任何作用,全部到达target停下来是因为speed变成了0,和flag并无关系,此外因为flag变成了false,链式运动的fn()不会执行,这不是个完美的框架
课程须知
1.您至少已经具备JavaSript的知识。2.您已经具备一些开发经验。
老师告诉你能学到什么?
1.使用定时器实现简单动画。2.如何一步步封装库。2.培养编程的思想。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

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

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消