-
window.onload = function(){ var Li1=document.getElementById('li1'); var Li2=document.getElementById('li2'); Li1.onmousemove=function(){ startMove(this,'opacity',100); } Li1.onmouseout=function(){ startMove(this,'opacity',30); } Li2.onmousemove=function(){ startMove(this,'left',400); } Li2.onmouseout=function(){ startMove(this,'left',200); } } function startMove(obj,attr,iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var cur=0; if(attr == 'opacity'){//判斷屬性是否為透明度 cur=Math.round(parseFloat(getStyle(obj,attr))*100);//parseFloat獲取小數(shù),Math.round四舍五入 } else{ cur =parseInt(getStyle(obj,attr)); } var speed = (iTarget - cur)/8; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(cur == iTarget){ clearInterval(obj.timer); } else{ if(attr=='opacity'){ obj.style.opacity = (cur+speed)/100; obj.style.filter='alpha(opacity:'+(cur+speed)+')'; } else{ obj.style[attr]= cur+speed+"px"; } } },50) }查看全部
-
多物體動畫，所有屬性都不能公用查看全部
-
<script>window.onload=function(){ start(); } function start(){ setInterval(function(){ var oid=document.getElementById("div1"); oid.style.width=parseInt(getStyle(oid,"width"))-1+"px"; oid.style.height=parseInt(getStyle(oid,"height"))-1+"px"; },30) } function getStyle(obj,attr){ if(obj.currentStyle){//ie return obj.currentStyle[attr];//針對IE }else{ return getComputedStyle(obj,false)[attr];//針對firefox } } </script>查看全部
-
有border/padding屬性的div運動時不能用offsetX屬性獲取div的X,因為offsetX獲取的是div盒子的屬性 不是conten的屬性！查看全部
-
var json={a:12,b:13} for(var i in json){alert(i);alert(json[i]);}查看全部
-
function getStyle(obj,attr){ if(obj.currentStyle){return obj.currentStyle[attr];} }else{return getComputedStyle(obj,false)[attr];} } //currentStyle[attr]IE瀏覽器 getComputedStyle(obj,false)[attr];火狐瀏覽器查看全部
-
offsetWidth取的是整個邊框的寬度（包含padding和border寬）。而style.width則指的是content的width。為了獲取content的width，不可以用offsetWidth，而應該用圖示的函數(shù)。 oDiv.style.width 當width:200px;等樣式寫在樣式表中時，無法直接獲得oDiv.style.xxx，（寫在內(nèi)聯(lián)樣式中才表示該元素擁有style屬性才能得到oDiv.style.xxx），所以要獲取樣式，需要通過函數(shù)： function getStyle(obj,attr){ if (obj.currentStyle) { return obj.currentStyle[attr];//IE瀏覽器 } else{ return getComputedStyle(obj,false)[attr]; }; } parseInt(getStyle(obj,'width')) ———————— oDiv.style.width=oDiv.style.width-1+"px";是錯誤的，因為oDiv.style.width得到的是字符串（如200px)，不能直接和-1+"px"連接起來成為新的值，需要用parseInt()方法： oDiv.style.width=parseInt(oDiv.style.width)-1+"px";查看全部
-
<style> *{margin:0;padding:0;} #div1{ width:200px; height:100px; background:#0F3; position:relative; left:-200px;} #div1 span{ display:block; height: 46px; position: absolute; right: -23px; width: 23px; text-align:center; background:#F00; } </style> <script> window.onload=function(){ var oid=document.getElementById('div1'); oid.onmouseover=function(){ startmove(0); } oid.onmouseout=function(){ startmove(-200); } } var timer=null; function startmove(offsetleft){ clearInterval(timer);//清除定時器 timer=setInterval(function(){ var speed=0; var oid=document.getElementById('div1'); // if(oid.offsetLeft==0){ if(oid.offsetLeft>offsetleft){ speed=-10;} else if(oid.offsetLeft<offsetleft){ speed=10; } else{ clearInterval(timer);} oid.style.left=oid.offsetLeft+speed+'px'; } ,30); } </script> </head> <body> <div id="div1"> <span>分享</span> </div>查看全部
-
Style對象的屬性與css中使用的屬性幾乎是一一對應的，只是包含連接符的屬性則被替換為無連接符的屬性，并且替換后的連擊符后的單詞第一個字母要大寫 font-size fontSize background-color backgroundColor查看全部
-
oDiv.style.width 當width:200px;等樣式寫在樣式表中時，無法直接獲得oDiv.style.xxx，（寫在內(nèi)聯(lián)樣式中才表示該元素擁有style屬性才能得到oDiv.style.xxx），所以要獲取樣式，需要通過函數(shù)： function getStyle(obj,attr){ if (obj.currentStyle) { return obj.currentStyle[attr];//IE瀏覽器 } else{ return getComputedStyle(obj,false)[attr]; }; } parseInt(getStyle(obj,'width')) ———————— oDiv.style.width=oDiv.style.width-1+"px";是錯誤的，因為oDiv.style.width得到的是字符串（如200px)，不能直接和-1+"px"連接起來成為新的值，需要用parseInt()方法： oDiv.style.width=parseInt(oDiv.style.width)-1+"px";查看全部
-
offsetWidth得到的是加上border和padding的值的寬度 使用封裝的getStyle方法解決問題查看全部
-
多物體動畫，所有屬性都不能公用查看全部
-
一個有趣的動畫效果查看全部
-
jquery里面已經(jīng)有一個動畫的框架。和之前課程里面講的封裝方法很類似。還可以考慮使用css3的方法來實現(xiàn)動畫效果。查看全部
-
json中元素的遍歷（其實json的定義格式和js的對象定義基本相同）。查看全部
舉報
0/150
提交
取消