-
function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return obj.getComputedStyle(obj,false)[attr];; } }查看全部
-
利用getstyle方法查看全部
-
多物体运动 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); } } };查看全部
-
1、速度的定义： var speed=(目标值-当前值（offset）)/参数； 2、取整函数： 向下取整：Math.floor(3.55);//3.55是取整的数值，结果为：3 向上取整：Math.ceil(3.35);//结果为：4 3、速度的取整判断： speed=speed>0?Math.ceil(speed):Math.floor(speed);//查看全部
-
window.onload=function(){ var oDiv=document.getElementById('div1'); oDiv.onmouseover=function(){ startMove(10,0); } oDiv.onmouseout=function(){ startMove1(-10,-200); }} var timer=null; function startMove(speed,iTatrget){ clearInterval(timer); var oDiv=document.getElementById('div1') timer=setInterval(function(){ var speed=0; if(oDiv.offsetLeft>iTarget){ speed=-10; }else{ speed=10; } if(oDiv.offsetLeft==iTatrget){ clearInterval(timer);}else { oDiv.style.left = oDiv.offsetLeft + speed + 'px'; } },30)}function startMove1(speed,iTarget){ clearInterval(timer); varoDiv=document.getElementById('div1')timer=setInterval(function(){ if(oDiv.offsetLeft==iTarget){clearInterval(timer); }else { oDiv.style.left = oDiv.offsetLeft + speed + 'px'; } },30)}查看全部
-
window.onload = function(){ var oDiv = document.getElementById('box1'); oDiv.onmouseover = function(){ startMove(0); } oDiv.onmouseout = function(){ startMove(-200); } } timer = null; function startMove(iTarget){ clearInterval(timer); var oDiv = document.getElementById('box1'); var speed = 0; if(oDiv.offsetLeft > iTarget){ speed = -10; }else{ speed = 10; } timer = setInterval(function(){ if(oDiv.offsetLeft == iTarget){ clearInterval(timer); }else{ oDiv.style.left = oDiv.offsetLeft + speed +'px'; } }, 30); }查看全部
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js动画效果</title> <style> *{ margin: 0; padding: 0; font-family: "微软雅黑"; } #box1{ position: absolute; left: -200px; background-color: blue; height: 200px; width: 200px; cursor: pointer; } #box1 span{ background-color: red; position: absolute; left: 200px; top: 80px; } </style> </head> <body> <div id="box1"> <span>分享</span> </div> </body> <script src="script.js"></script> </html>查看全部
-
用toFix()解决浮点数不相等造成无法清除定时器的问题<即出现一闪一闪> <script> window.onload=function() { var div1 = document.getElementById('div1'); div1.onmouseover = function () { stChange(1); }; div1.onmouseout = function () { stChange(0.3); }; } var opacity1 = 0.5; var timer = null; function stChange(iTarget) { var div1 = document.getElementById('div1'); clearInterval(timer); timer = setInterval(function () { var speed = 0; if (opacity1 < iTarget) { speed = 0.1; } else { speed = -0.1; } if (opacity1.toFixed(1) == iTarget) { //保留一位小数，不然浮点数无法相等，造成无法清除 clearInterval(timer); } else { opacity1 += speed; div1.style.opacity = opacity1; } }, 50); } </script>查看全部
-
JS动画效果： 运动框架实现思路： 1.速度（改变值left,right,width,height,opacity) 2.缓冲运动 3.多物体运动 4.任意值变化 5.链式运动 6.同时运动查看全部
-
只要是多物体运动，所有的参数都不能公用查看全部
-
多物体运动 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); } } };查看全部
-
火狐 IE 原生JS修改样式查看全部
-
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)查看全部
-
offsetwidth:是元素相对父元素的偏移宽度。等于border+padding+width 而width仅仅是自身的宽度查看全部
-
多物体运动 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/150
提交
取消