-
直接用i，是彈得名，用json[i]彈得是值查看全部
-
如果加上邊框，通過 .style.withd 獲取的值和我們預期的不一樣，就需要處理一下了，用上節課寫的getstyle函數查看全部
-
可以獲取和改變很多樣式查看全部
-
獲取樣式查看全部
-
可以在dom對象里添加自定義屬性查看全部
-
html結構是“分享的那個”查看全部
-
設置鼠標劃過觸發計時器，若鼠標劃過多次，則會疊加（即越來越快）。解決方法：在定時器函數里首句添加clearInterval查看全部
-
標簽對象的style屬性只能獲取嵌入在標簽上的CSS屬性，但是該屬性能讀寫； getComputedStyle針對標準瀏覽器，是window的對象。只能讀； currentStyle針對ie瀏覽器，是標簽對象的屬性。查看全部
-
大的思路查看全部
-
css定義（filter:alpha(opacity:30)） JS 改變： IE：style.filter=‘alpha(opactiy:’+值+')' 非IE .style.opactiy=值/100（火狐或者chrome關于透明度的滿值1，IE是100）查看全部
-
本節示例代碼： //獲取樣式 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; // if IE }else{ return getComputedStyle(obj,false)[attr]; //if FireFox } } function animation(obj,attr,target,fn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var val = 0; if(attr == 'opacity'){ val = Math.round(parseFloat(getStyle(obj,attr))*100); }else{ val = parseInt(getStyle(obj,attr)); } var speed = (target-val)/8; speed = speed>0 ? Math.ceil(speed) : Math.floor(speed); if(val == target){ clearInterval(obj.timer); //判斷是否傳入了fn if(fn){ fn(); } }else{ if(attr == 'opacity'){ obj.style.filter = 'alpha(opacity:' + val+speed + ')'; obj.style.opacity = (val+speed)/100; } else{ obj.style[attr] = val + speed +"px"; } } },30); };查看全部
-
//獲取樣式 function getStyle(obj,attr){ if(obj.currentStyle){ return boj.currentStyle[attr]; // if IE }else{ return getComputedStyle(obj,false)[attr]; //if FireFox } };查看全部
-
//本節示例代碼 <script type="text/javascript"> window.onload = function(){ var li = document.getElementsByTagName("li"); for(var i=0;i<li.length;i++){ li[i].timer = null; li[i].onmouseover = function(){ animation(this,200); }; li[i].onmouseout = function(){ animation(this,50); }; } }; function animation(obj,target){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed = (target-obj.offsetWidth)/10; 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); }; </script>查看全部
-
本節示例代碼： <script type="text/javascript"> window.onload = function(){ var oDiv =document.getElementById("div1"); oDiv.onmouseover = function(){ startMove(0); }; oDiv.onmouseout = function(){ startMove(-200); }; }; var timer = null; function startMove(target){ var oDiv =document.getElementById("div1"); clearInterval(timer); timer = setInterval(function(){ var speed = (target - oDiv.offsetLeft)/20; speed = speed>0 ? Math.ceil(speed) : Math.floor(speed); if(oDiv.offsetLeft == target){ clearInterval(timer); } else{ oDiv.style.left = oDiv.offsetLeft + speed + 'px'; } },30); }; </script>查看全部
-
//移動的元素需要設置position <script type="text/javascript"> window.onload = function(){ var oDiv =document.getElementById("div1"); oDiv.onmouseover = function(){ startMove(10,0); }; oDiv.onmouseout = function(){ startMove(20,-200); }; }; var timer = null; function startMove(speed,target){ var oDiv =document.getElementById("div1"); if(oDiv.offsetLeft > target){ speed = 0-speed; } clearInterval(timer); timer = setInterval(function(){ if(oDiv.offsetLeft == target){ clearInterval(timer); } else{ oDiv.style.left = oDiv.offsetLeft + speed + 'px'; } },30); }; </script>查看全部
舉報
0/150
提交
取消