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

JS动画效果

vivian Web前端工程师
难度初级
时长 2小时 8分
学习人数
综合评分9.60
537人评价 查看评价
9.8 内容实用
9.6 简洁易懂
9.4 逻辑清晰
  • flag 标志变量定义没搞懂
    查看全部
  • <!doctype html> <html> <head> <title></title> <meta charset='UTF-8'/> <style type='text/css'> *{ padding:0; margin:0; } #div1{ width:200px; height:100px; background:red; } </style> <script> window.onload=function(){ var oDiv=document.getElementById('div1'); oDiv.onmouseover=function(){ startMove(1000); } oDiv.onmouseout=function(){ startMove(100); } var timer=null; function startMove(iTarget){ clearInterval(timer); timer=setInterval(function(){ var speed=0; if(iTarget>200){ speed=10; }else{ speed=-10; } if(oDiv.offsetWidth==iTarget){ clearInterval(timer); }else{ oDiv.style.width=oDiv.offsetWidth+speed+'px'; } },30); } } </script> </head> <body> <div id='div1'></div> </body> </html>
    查看全部
    1 采集 收起 来源:JS速度动画

    2018-03-22

  • currentStyle getComputedStyle
    查看全部
    0 采集 收起 来源:获取样式

    2016-01-17

  • .offsetleft获取当前对象的left属性值
    查看全部
    0 采集 收起 来源:JS速度动画

    2016-01-15

  • JSON格式: var json = {name:key,name,key,...} for(var i in json){ alert(i); //遍历name alert(json[i]); //遍历key }
    查看全部
  • 链式运动需要底层框架
    查看全部
    0 采集 收起 来源:同时运动

    2016-01-14

  • 链式动画!在运动函数中用if(cur==target){clearInterval(obj.timer) if(fn){ fn(); } }
    查看全部
    0 采集 收起 来源:JS链式动画

    2016-01-14

  • 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)
    查看全部
  • JSON格式: var json = {name:key,name,key,...} for(var i in json){ alert(i); //遍历name alert(json[i]); //遍历key }
    查看全部
  • 添加透明度的时候比较特殊。
    查看全部
  • 添加透明度: filter:alpha(opacity:30); opacity:0.3;
    查看全部
  • parseInt(getStyle(obj,'width'));
    查看全部
  • 获取样式:
    查看全部
    0 采集 收起 来源:获取样式

    2016-01-13

  • 获取样式兼容性写法 if(obj.currentStyle){return obj.currentStyle[attr]}else{return getComputedStyle(attr,false)[attr]} offset 做运动计算时存在内外 边距 或者边框 影响计算 offsetwidth 不等于width
    查看全部
  • offsetwidth:是元素相对父元素的偏移宽度。等于border+padding+width 而width仅仅是自身的宽度 获取样式,解决兼容性 //obj 节点对象 //attr 属性名 // function getStyle(obj,attr){ // if (obj.currentStyle) { // return obj.currentStyle[attr]; // } else{ // return getComputedStyle(obj,false)[attr]; // }; // }
    查看全部
    0 采集 收起 来源:获取样式

    2016-01-13

举报

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

微信扫码,参与3人拼团

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

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