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

JS动画效果

vivian Web前端工程师
难度初级
时长 2小时 8分
学习人数
综合评分9.60
537人评价 查看评价
9.8 内容实用
9.6 简洁易懂
9.4 逻辑清晰
  • 获取样式的方法
    查看全部
    0 采集 收起 来源:获取样式

    2016-01-05

  • 多物体运动 for循环来为每一个TagNameList[i]添加事件 并添加属性来区分各自的定时器(用于取消) 利用参数中的this来指定所选择的当前元素 多物体不要共用一个值,在对象上定义一个单独的属性保持值 存在多项共用一个值,并且这个值会发生改变时,最好单独给赋值,避免出现争用的情况。 <script> window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++){ // 给每一个li设置一个timer,才不会致使他们去抢timer aLi[i].timer=null; aLi[i].onmouseover=function(){ startMove(this,400); }; aLi[i].onmouseout=function(){ startMove(this,200) } } var oDivLi=document.getElementsByTagName('div'); for(var j=0;j<oDivLi.length;j++){ oDivLi[j].timer=null; oDivLi[j].alpha=30; oDivLi[j].onmouseover=function(){ startMove1(this,100); }; oDivLi[j].onmouseout=function(){ startMove1(this,30); } } };
    查看全部
    0 采集 收起 来源:JS多物体动画

    2018-03-22

  • 获取样式兼容性写法 if(obj.currentStyle){return obj.currentStyle[attr]}else{return getComputedStyle(attr,false)[attr]} offset 做运动计算时存在内外 边距 或者边框 影响计算 offsetwidth 不等于width
    查看全部
  • html节点的样式分为:浏览器默认样式、引用样式(引用外部css文件的样式、style标签内定义的样式)、行间样式(节点style属性定义的样式) runtimeStyle 运行时的样式!如果与style的属性重叠,将覆盖style的属性! currentStyle 指 style 和 runtimeStyle 的结合! 通过currentStyle就可以获取到通过内联或外部引用的CSS样式的值了(仅限IE) 如:document.getElementById("test").currentStyle.top 要兼容FF,就得需要getComputedStyle 出马了 function getStyle(obj, attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj,false)[attr]; } }
    查看全部
    0 采集 收起 来源:获取样式

    2018-03-22

  • offsetwidth:是元素相对父元素的偏移宽度。等于border+padding+width 而width仅仅是自身的宽度
    查看全部
    0 采集 收起 来源:获取样式

    2016-01-03

  • 对目标值与当前值的判断进行分析从而决定速度的正负;
    查看全部
    0 采集 收起 来源:JS速度动画

    2016-01-02

  • getStyle()
    查看全部
    0 采集 收起 来源:获取样式

    2016-01-01

  • 图标的滚动动画 1、图标向上移出并变透明:top:-25px,opacity:0;然后让图标定位到指定位置:top:30px;最后移入初始位置:top:20px,opacity:100;
    查看全部
    0 采集 收起 来源:JS动画案例

    2016-01-01

  • 运动框架思路
    查看全部
  • 运动框架
    查看全部
  • $(function(){ $('#move a').mouseenter(function(){ $(this).find('i').animate({top:"200px",opacity:0},300,function(){ $(this).css({top:-200}); $(this).animate({top:"0px",opacity:100},200); }); }); });
    查看全部
    0 采集 收起 来源:jQuery动画案例

    2018-03-22

  • 图标滚动效果:先让图标移出视线范围并变透明:top:-25px,opacity:0;然后再让图标定位到指定位子:top:30px;最后移入初始位置并显示图标:top:20px,opacity:100;
    查看全部
    0 采集 收起 来源:JS动画案例

    2015-12-30

  • 1、获取当前透明度不用parseInt 2、设置透明度要考虑兼容 obj.style.filter='alpha(opacity:'+(当前透明度+变化速度)+')'; obj.style.opacity=(当前透明度+变化速度)/100; 3、透明度不加“px” 在使用parseInt()时处理透明度小数时,会有影响 单位设置 相应位置进行判断 IE/FireFox 取相应值 Math.round()四舍五入取整数值 Math.round(parseFloat(getStyle(obj,attr))*100)
    查看全部
  • 1、dom.style.xxx 这种写法只能获取行内样式 例如 <div ></div> div.style.width能获取到是200px,但是没有出现在 引号中的样式是获取不到的 2、万能方法。 getComputedStyle(div,null).xxx 这个是标准方法,需要做一下兼容 currentStyle 是IE的 3、友情赠送获取任何样式的代码 function getStyle(obj,style){ if(obj.currentStyle){ return obj.currentStyle[style]; }else{ return getComputedStyle(obj,null)[style]; } }
    查看全部
    0 采集 收起 来源:获取样式

    2018-03-22

  • for循环来为每一个TagNameList[i]添加事件 并添加属性来区分各自的定时器(用于取消) 利用参数中的this来指定所选择的当前元素 多物体不要共用一个值,在对象上定义一个单独的属性保持值 存在多项共用一个值,并且这个值会发生改变时,最好单独给赋值,避免出现争用的情况。
    查看全部
    0 采集 收起 来源:JS多物体动画

    2015-12-30

举报

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

微信扫码,参与3人拼团

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

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