-
獲取樣式和轉(zhuǎn)換字符取整 oDiv.style.width 當(dāng)width:200px;等樣式寫在樣式表中時(shí)，無法直接獲得oDiv.style.xxx，（寫在內(nèi)聯(lián)樣式中才表示該元素?fù)碛衧tyle屬性才能得到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";是錯(cuò)誤的，因?yàn)閛Div.style.width得到的是字符串（如200px)，不能直接和-1+"px"連接起來成為新的值，需要用parseInt()方法： oDiv.style.width=parseInt(oDiv.style.width)-1+"px";查看全部
-
多物體運(yùn)動(dòng) for循環(huán)來為每一個(gè)TagNameList[i]添加事件 并添加屬性來區(qū)分各自的定時(shí)器(用于取消) 利用參數(shù)中的this來指定所選擇的當(dāng)前元素 多物體不要共用一個(gè)值,在對(duì)象上定義一個(gè)單獨(dú)的屬性保持值 存在多項(xiàng)共用一個(gè)值，并且這個(gè)值會(huì)發(fā)生改變時(shí)，最好單獨(dú)給賦值，避免出現(xiàn)爭(zhēng)用的情況。 <script> window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++){ // 給每一個(gè)li設(shè)置一個(gè)timer，才不會(huì)致使他們?nèi)宼imer 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); } } };查看全部
-
緩沖運(yùn)動(dòng)： 距離和速度成正比 ：speed=（itarget-oDiv.offsetLeft)/10; alert(Math.floor(3.98))向下取整 alert(Math.ceil(3.22))向上取整 遇到這種運(yùn)動(dòng)涉及到數(shù)字的問題都要做一個(gè)判斷，向上或者向下取整 // 從用兩個(gè)函數(shù)實(shí)現(xiàn)，到用一個(gè)函數(shù)：兩個(gè)有很多相同的部分，則相同部分可以共用，不同部分看有什么聯(lián)系 // 從傳入兩個(gè)參數(shù)到一個(gè)參數(shù)：參數(shù)傳遞盡可能的少 <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>查看全部
-
透明度： css定義（filter:alpha(opacity:30)） JS 改變： IE：style.filter=‘a(chǎn)lpha(opactiy:’+值+')' 非IE .style.opactiy=值/100（火狐或者chrome關(guān)于透明度的滿值1，IE是100） <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標(biāo)題文檔</title> <style> body,div{ margin:0; padding:0; } #div1{ width:200px; height:200px; background:red; filter:alpha(opacity:30); opacity:0.3; } </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> </head> <body> <div id="div1"></div> </body> </html>查看全部
-
JS動(dòng)畫效果： 2-1：速度動(dòng)畫： 為防止動(dòng)畫累加，在每次觸發(fā)動(dòng)畫事件時(shí)，應(yīng)該先清除前一個(gè)沒有完成的動(dòng)畫，即清除之前開啟的定時(shí)器，然后這次再開啟新的定時(shí)器。 命名的函數(shù)有多出相同時(shí)，使用封裝函數(shù)的方法，盡可能的減少傳入函數(shù)的參數(shù) <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);//清除定時(shí)器 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>查看全部
-
shewoqishuid 運(yùn)動(dòng)框架實(shí)現(xiàn)思路 1.速度（改變值left、right、width、height、opacity） 2.緩沖運(yùn)動(dòng) 3.多物體運(yùn)動(dòng) 4.任意值變化 5.鏈?zhǔn)竭\(yùn)動(dòng) 6.同時(shí)運(yùn)動(dòng)查看全部
-
jquery查看全部
-
opacity查看全部
-
getStyle查看全部
-
透明度設(shè)置 filter:alpha(opacity:30)===>ie opacity:0.3===>其他瀏覽器查看全部
-
offsetLeft值可以獲取當(dāng)前的left值， 而offsetLeft屬性不能被賦值，只能獲取查看全部
-
運(yùn)動(dòng)框架實(shí)現(xiàn)思路 1.速度（改變值left、right、width、height、opacity） 2.緩沖運(yùn)動(dòng) 3.多物體運(yùn)動(dòng) 4.任意值變化 5.鏈?zhǔn)竭\(yùn)動(dòng) 6.同時(shí)運(yùn)動(dòng)查看全部
-
有border/padding屬性的div運(yùn)動(dòng)時(shí)不能用offsetX屬性獲取div的X,因?yàn)閛ffsetX獲取的是div盒子的屬性 不是conten的屬性！查看全部
-
offsetWidth取的是整個(gè)邊框的寬度（包含padding和border寬）。而style.width則指的是content的width。為了獲取content的width，不可以用offsetWidth， oDiv.style.width 當(dāng)width:200px;等樣式寫在樣式表中時(shí)，無法直接獲得oDiv.style.xxx，（寫在內(nèi)聯(lián)樣式中才表示該元素?fù)碛衧tyle屬性才能得到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";是錯(cuò)誤的，因?yàn)閛Div.style.width得到的是字符串（如200px)，不能直接和-1+"px"連接起來成為新的值，需要用parseInt()方法： oDiv.style.width=parseInt(oDiv.style.width)-1+"px";查看全部
-
JSON（利用其完成同時(shí)運(yùn)動(dòng)） json={name:key,name:key....}可以在一個(gè)括號(hào)內(nèi)加入多對(duì)值 利用for in 遍歷 ：for(var i in JSON) i表示name,JSON[i]標(biāo)示key(值) 可以將其理解為（屬性:值）的組合查看全部
舉報(bào)
0/150
提交
取消