-
jq實現代碼查看全部
-
獲取樣式，解決兼容性 //obj 節點對象 //attr 屬性名 // function getStyle(obj,attr){ // if (obj.currentStyle) { // return obj.currentStyle[attr]; // } else{ // return getComputedStyle(obj,false)[attr]; // }; // }查看全部
-
只要是多物體運動，所有的東西都不能共用。查看全部
-
filter:alpha(opacity:30); opacity:0.3;查看全部
-
aLi[i].timer = null;查看全部
-
IE中opacity滿值100；chrome或Firefox中opacity滿值1。查看全部
-
運動框架實現思路查看全部
-
運動框架實現思路查看全部
-
<title>多物體-透明度運動</title> <meta charset="utf-8"/> <style type="text/css"> *{margin:0; padding:0;} div{width:200px; height:200px; margin:10px; float:left; background: #F00; opacity:0.3; filter:alpha(opacity:30);} </style> <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementsByTagName('div'); for(var i=0 ;i<oDiv.length ;i++){ oDiv[i].timer = null; oDiv[i].alpha = 30; oDiv[i].onmouseover = function(){ startMove(this,100); } oDiv[i].onmouseout = function(){ startMove(this,30); } } } function startMove(obj,iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed = 0; if(obj.alpha < iTarget){ speed = 10; } else { speed = -10; } if(obj.alpha == iTarget){ clearInterval(obj.timer); } else { obj.alpha += speed; obj.style.filter = 'alpha(opacity:'+obj.alpha+')'; obj.style.opacity = obj.alpha / 100; } },50); } </script> </head> <div id="div1"></div> <div id="div2"></div>查看全部
-
<!DOCTYPE html> <html> <head> <title>多物體運動</title> <meta charset="utf-8"/> <style type="text/css"> *{margin:0;padding:0;} ul{list-style:none;} ul li{width: 200px;height: 100px;background: yellow;margin-bottom: 20px;} </style> <script type="text/javascript"> window.onload = function(){ var olis = document.getElementsByTagName('li'); for(var i=0; i<olis.length; i++){ olis[i].timer = null; olis[i].onmouseover = function(){ startMove(this,400); }; olis[i].onmouseout = function(){ startMove(this,200); } } } function startMove(obj,iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed = (iTarget-obj.offsetWidth)/8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if(obj.offsetWidth == iTarget){ clearInterval(obj.timer); } else { obj.style.width = obj.offsetWidth + speed + 'px'; } },50); } </script> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>查看全部
-
緩沖運動 <html> <head> <meta charset="utf-8"/> <title>js動畫-速度變化</title> <style type="text/css"> *{margin:0;padding:0;} #div1{width:200px; height:200px;background:#F00; position: relative; left:-200px;top:0;} #div1 span{width:20px;height:50px;background:#0F0;position:absolute;left:200px;top:75px;} </style> <script type="text/javascript"> var timer = null; window.onload = function(){ div1.onmouseover = function(){ move(0); }; div1.onmouseout = function(){ move(-200); }; } function move(iTagert){ var div1 = document.getElementById('div1'); clearInterval(timer); timer = setInterval(function(){ var speed = (iTagert - div1.offsetLeft)/20; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if(div1.offsetLeft == iTagert){ clearInterval(timer); } else { div1.style.left = div1.offsetLeft+speed+'px'; } },50); } </script> </head> <body> <div id="div1"> <span id="share">分享</span> </div> </body> </html>查看全部
-
<!DOCTYPE html> <html> <head> <title>透明度運動</title> <meta charset="utf-8"/> <style type="text/css"> *{margin:0; padding:0;} #div1{width:500px; height:500px; background: #F00; opacity:0.3; filter:alpha(opacity:30);} </style> <script type="text/javascript"> window.onload = function(){ var div1 = document.getElementById('div1'); div1.onmouseover = function(){ startMove(100); } div1.onmouseout = function(){ startMove(30); } } var timer = null; var alpha = 30; function startMove(iTarget){ var div1 = document.getElementById('div1'); clearInterval(timer); timer = setInterval(function(){ var speed = 0; if(alpha < iTarget){ speed = 10; } else { speed = -10; } if(alpha == iTarget){ clearInterval(timer); } else { alpha += speed; div1.style.filter = 'alpha(opacity:'+alpha+')'; div1.style.opacity = alpha / 100; } },50); } </script> </head> <body> <div id="div1"> </div> </body> </html>查看全部
-
getstyle方法查看全部
-
淘寶JQ動畫查看全部
-
淘寶實例查看全部
舉報
0/150
提交
取消