-
w3c中的盒子模型的寬:包括margin+border+padding+width; width:margin*2+border*2+padding*2+width; height:margin*2+border*2+padding*2+height;查看全部
-
運(yùn)動框架實(shí)現(xiàn)思路查看全部
-
注意speed的設(shè)置：1.改變寬度：function startMove (obj,target) { clearInterval(obj.timer); obj.timer=setInterval(function() { var speed=(target-obj.offsetWidth)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if (obj.offsetWidth==target) { clearInterval(obj.timer); }else{ obj.style.width=obj.offsetWidth+speed+'px'; } },30); } 2.改變透明度：function startShow (obj,target) { clearInterval(obj.timer); obj.timer=setInterval(function(){ var speed=0; if (obj.alpha>target) { speed=-10; } else{ speed=10; } if(obj.alpha==target){ clearInterval(obj.timer); }else{ obj.alpha+=speed; obj.style.filter="alpha(opacity:"+obj.alpha+")"; obj.style.opacity=obj.alpha/100; } },30); }查看全部
-
filter:alpha(opacity=50); /*IE濾鏡，透明度50%*/ -moz-opacity:0.5; /*Firefox私有，透明度50%*/ opacity:0.5;/*其他，透明度50%*/查看全部
-
運(yùn)動框架實(shí)現(xiàn)思路查看全部
-
var speed=(iTarget-obj.offsetWidth)/8 speed= speed>0?Math.ceil(speed):Math.floor(speed);查看全部
-
獲取/設(shè)置元素的樣式的函數(shù)： function getStyle(對象，屬性) if(對象.currentStyle) {return obj.currentStyle[屬性];//針對IE瀏覽器} else { return getComputedStyle(對象，false);//針對火狐瀏覽器 }查看全部
-
//獲取style樣式 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
運(yùn)動框架實(shí)現(xiàn)思路查看全部
-
Math.floor(3.98)向下取整； Math.ceil(3.2)向上取整 遇到涉及運(yùn)動與數(shù)學(xué)問題做一個(gè)判斷，向上或者向下取整 <script> window.onload = function(){ var oDiv = document.getElementById("div1"); oDiv.onmouseover = function(){ startMove(0); }; oDiv.onmouseout = function(){ startMove(-200); }; }; var timer = null function startMove(offleft){ clearInterval(timer); var oDiv = document.getElementById("div1"); timer = setInterval(function(){ var speed = (offleft - oDiv.offsetLeft)/10; speed = speed > 0 ?Math.ceil(speed):Math.floor(speed); if(oDiv.offsetLeft == offleft ){ clearInterval(timer); } oDiv.style.left = oDiv.offsetLeft+speed+'px'; },30); } </script>查看全部
-
相關(guān)CSS查看全部
-
<!doctype html> <html> <head> <meta charset="utf-8"> <title>js動畫制作</title> </head> <style> body,div,span{ margin:0; padding:0; } #div1{ height: 200px; width: 200px; background-color: #f00; position: relative; left: 0px; top: 0; opacity:0.3; filter:alpha(opacity：30） } </style> <script> window.onload = function(){ var oDiv =document.getElementById('div1'); oDiv.onmouseover=function(){ startMove(100); } oDiv.onmouseout=function(){ startMove(30); } } var timer = null; var alpha = 30; function startMove(iTarget){ var oDiv =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; oDiv.style.opacity = alpha/100 } },30) } </script> 所有主流瀏覽器(IE,Firefox,Opera,Chrome,Safari)都支持opacity屬性 注意：IE8和早期版本支持另一種過濾器屬性。像：filter:Alpha(opacity=50)查看全部
-
CSS樣式查看全部
-
JS動畫效果： 2-1：速度動畫： 為防止動畫累加，在每次觸發(fā)動畫事件時(shí)，應(yīng)該先清除前一個(gè)沒有完成的動畫，即清除錢一池開啟的定時(shí)器，然后這次再開啟一個(gè)定時(shí)器。 offsetLeft值可以獲取當(dāng)前的left值， 而offsetLeft屬性不能被賦值，只能獲取 window.onload = function(){ var oDiv = document.getElementById("div1"); oDiv.onmouseover = function(){ startMove(0); }; oDiv.onmouseout = function(){ startMove(-200); }; }; var timer = null function startMove(offleft){ clearInterval(timer); var oDiv = document.getElementById("div1"); timer = setInterval(function(){ var speed = 0; if(oDiv.offsetLeft > offleft ){ speed = -10; }else if(oDiv.offsetLeft < offleft) { speed = 10; }else{ clearInterval(timer); } oDiv.style.left = oDiv.offsetLeft+speed+'px'; },30); }查看全部
-
速度動畫 -200變成0查看全部
舉報(bào)
0/150
提交
取消