-
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
提交
取消