-
多物体运动查看全部
-
获取元素的css属性查看全部
-
多物体运动，不可共用相关变量查看全部
-
1、dom.style.xxx 这种写法只能获取行内样式 例如 <div ></div> div.style.width能获取到是200px，但是没有出现在 引号中的样式是获取不到的 2、万能方法。 getComputedStyle(div,null).xxx 这个是标准方法，需要做一下兼容 currentStyle 是IE的 3、友情赠送获取任何样式的代码 1 2 3 4 5 6 7 function getStyle(obj,style){ if(obj.currentStyle){ return obj.currentStyle[style]; }else{ return getComputedStyle(obj,null)[style]; } }查看全部
-
window.onload=function(){ var oDiv=document.getElementById('div1'); oDiv.onmouseover=function(){ startMove(10,0); } oDiv.onmouseout=function(){ startMove(-10,-200); } } var timer=null; function startMove(speed,iTarget){ clearInterval(timer); //先清空所有的定时器，防止叠加 var oDiv=document.getElementById('div1'); timer=setInterval(function(){ if (oDiv.offsetLeft==iTarget) { clearInterval(timer); //超过范围时停止定时器 }else{ oDiv.style.left=oDiv.offsetLeft+speed+'px'; //否则继续左移 } },30) //设置定时器时间间隔为30毫秒 }查看全部
-
多物体运动 参数不能公用查看全部
-
由于数值设置的原因，div移动到一定px后，进行相减再除20的运算后会出现小数，比如0.75，比如这时div移动到了290，程序里写到div的left=oDiv.offsetLeft+speed+'px',那么div的left就是290.75px,而浏览器是不允许出现小数的，会把0.75去掉，那么div的left就成了290，下次执行时div的left是290，算出来速度还是0.75，浏览器又省略了小数，结果就是div停在了290px，到不了目标点300。查看全部
-
懵了查看全部
-
运动框架实现思路查看全部
-
关于链式运动的BUG：var flag=true;定义在了for-in外面，而因为json中的属性无法同一时间运动到目标值，所以flag的值一定会变为false。变为false之后，当所有的属性值都运动到目标值也没有语句使它变为true，所以fn()不会执行。查看全部
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js透明效果</title> <style> body{margin:0} #change { background-color:olive; width: 100px; height: 100px; } </style> <script> window.onload=function(){ document.getElementById('change').onmouseover=function(){ startChange(0.1); } document.getElementById('change').onmouseout=function(){ startChange(1); } var timer=null; var alpha=1; function startChange(target){ var oDiv=document.getElementById('change'); clearInterval(timer); timer=setInterval(function(){ var speed=0; if(alpha>target){ speed=-0.01; }else{ speed=0.01; } if(alpha==target){ clearInterval(timer); }else{ alpha+=speed; oDiv.style.opacity=alpha; } },3) } } </script> </head> <body> <div id="change"></div> </body> </html>查看全部
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>js速度动画</title> <style> div,body,span{ margin:0; } #more{ width:200px; height:200px; position:relative; left:-200px; background:olive; } #more span{ width: 20px; height: 50px; background-color: red; position: absolute; top: 75px; left: 200px; } </style> <script> window.onload=function(){ var oDiv=document.getElementById('more'); oDiv.onmouseover=function(){ startMove(10,0); } oDiv.onmouseout=function(){ startMove(-10,-200); } } var timer=null; function startMove(speed,target){ clearInterval(timer); var oDiv=document.getElementById('more'); timer=setInterval(function(){ if(oDiv.offsetLeft==target){ clearInterval(timer); }else{ oDiv.style.left=oDiv.offsetLeft+speed+'px'; } },30); } </script> </head> <body> <div id="more"> <span id="share">分享</span> </div> </body> </html>查看全部
-
链式 回调函数查看全部
-
链式回调查看全部
-
IE浏览器获取属性值currentStyle[属性] 火狐浏览器获取属性getComputedStyle[属性]查看全部
举报
0/150
提交
取消