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

JS动画效果

vivian Web前端工程师
难度初级
时长 2小时 8分
学习人数
综合评分9.60
537人评价 查看评价
9.8 内容实用
9.6 简洁易懂
9.4 逻辑清晰
  • 1.offsetWidth属性可以返回对象的padding+border+width属性值之和, style.width返回值就是定义的width属性值。 2.offsetWidth属性仅是可读属性,而style.width是可读写的。 3.offsetWidth属性返回值是整数,而style.width的返回值是字符串。
    查看全部
    0 采集 收起 来源:获取样式

    2017-07-16

  • 缓冲运动, >0 向上取证 <0 向下取证 当页面中有多个 缓速运动的元素、 或者其他一些《样式的变化》的时候也是如此, !!每个都有自己的值 例:odiv[i].alpha = 30; 为了避免 定时器 的重复 为页面中 的每个定时器加 编号 aLi[i].timer = null; 取代 var timer = null 当为div 添加其他样式的时候 请看下一节 补充bug
    查看全部
    0 采集 收起 来源:JS多物体动画

    2018-03-22

  • 阿斯顿
    查看全部
    0 采集 收起 来源:JS速度动画

    2017-07-16

  • 慕课网笔记发布失败
    查看全部
    0 采集 收起 来源:JS速度动画

    2017-07-16

  • 注意避免硬编码即在函数的判断之中直接使用具体的值如10,20等,应该把这些变化的值作为参数传入函数内部,即美观也方便后来的修改。
    查看全部
    0 采集 收起 来源:JS速度动画

    2017-07-01

  • parseInt() 函数可解析一个字符串,并返回一个整数。 语法: parseInt(string, radix);其中radix为要解析的进制数
    查看全部
    0 采集 收起 来源:获取样式

    2017-06-30

  • opacity 属性设置元素的不透明级别。
    查看全部
    0 采集 收起 来源:JS多物体动画

    2017-06-30

  • 1.offsetWidth属性可以返回对象的padding+border+width属性值之和,style.width返回值就是定义的width属性值。 2.offsetWidth属性仅是可读属性,而style.width是可读写的。 3.offsetWidth属性返回值是整数,而style.width的返回值是字符串。 4.style.width仅能返回以style方式定义的内部样式表的width属性值。
    查看全部
    1 采集 收起 来源:获取样式

    2017-06-28

  • 运动框架实现思路
    查看全部
  • 清除公用定时器,使其不产生冲突的方法。
    查看全部
    0 采集 收起 来源:JS多物体动画

    2017-06-22

  • 运动框架
    查看全部
    0 采集 收起 来源:jQuery动画案例

    2017-06-22

  • getStyle函数
    查看全部
    1 采集 收起 来源:获取样式

    2017-06-20

  • function startTransparent(transparentObject, eventType) { var alphaCurrent, alphaDirect, alphaTarget; if (eventType == "mouseout") { alphaTarget = 100; alphaDirect = -1; alphaCurrent = 30; } else if (eventType == "mouseover") { alphaTarget = 30; alphaDirect = 1; alphaCurrent = 100; } clearInterval(transparentObject.transFlag); transparentObject.transFlag = setInterval(function() { transparentObject.style.filter = "alpha(opacity=" + alphaTarget + ")"; transparentObject.style.opacity = alphaTarget / 100; if (alphaCurrent !== alphaTarget) { alphaTarget += alphaDirect; } else { clearInterval(transparentObject.transFlag); } }, 1); }
    查看全部
    0 采集 收起 来源:JS多物体动画

    2018-03-22

  • // 设置timer var moveFlag = null; /** * 定义移动函数 * moveTarget 移动的目标位置 * moveObject 需要移动的对象 */ function startMove(moveObject, moveTarget) { clearInterval(moveFlag); moveFlag = setInterval(function() { //移动速度等于目标减去实时的位移,放慢15倍 var speed = (moveTarget - moveObject.offsetLeft) / 15; //从负数到0向上取整,从0到负数向下取整 speed = moveTarget == 0 ? Math.ceil(speed) : Math.floor(speed); //移动操作 if (moveObject.offsetLeft !== moveTarget) { moveObject.style.left = moveObject.offsetLeft + speed + "px"; } else { clearInterval(moveFlag); } }, 10); }
    查看全部
    1 采集 收起 来源:JS缓冲动画

    2018-03-22

  • 简单动画
    查看全部

举报

0/150
提交
取消
课程须知
1.您至少已经具备JavaSript的知识。2.您已经具备一些开发经验。
老师告诉你能学到什么?
1.使用定时器实现简单动画。2.如何一步步封装库。2.培养编程的思想。

微信扫码,参与3人拼团

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

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