-
offsetLeft當(dāng)前位置的值查看全部
-
運(yùn)動(dòng)框架的實(shí)現(xiàn)思路查看全部
-
JSON是一種輕量級(jí)的數(shù)據(jù)交換格式 var json={name:key}多對(duì)值可以用逗號(hào)隔開var json={a:12,b:2} 遍歷json,用 for-in循環(huán)查看全部
-
多物體運(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)爭用的情況。 <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); } } };查看全部
-
透明度： 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>查看全部
-
alert(0.07*100)會(huì)出現(xiàn)神奇的效果!查看全部
-
1、基礎(chǔ)動(dòng)畫實(shí)現(xiàn)原理：利用定時(shí)器循環(huán)改變?cè)氐臉邮綄傩浴?2、clientWidth=padding+內(nèi)容width。 offsetWidth=border+padding+內(nèi)容width。 3、獲取當(dāng)前元素樣式 IE currentStyle, firefox getComputedStyle查看全部
-
多物體的事件，慎重公用的屬性。查看全部
-
function startMove(obj,json,fn) { var flag = true; clearInterval(obj.timer); obj.timer = setInterval(function() { for (var attr in json) { var current = 0; if (attr == "opacity") { current = Math.round(parseFloat(getStyle(obj,attr))*100); } else { current = parseInt(getStyle(obj,attr)); } var speed = (json[attr] - current)/8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (current != json[attr]) { flag = false; } else { flag = true; //這里需要判斷 } if (attr == "opacity") { obj.style.filter = "alpha(opacity:" + (current + speed) +")"; obj.style.opacity = (current + speed)/100; } else { obj.style[attr] = current + speed + "px"; } } if (flag) { clearInterval(obj.timer); if (fn) { fn(); } } },30); }查看全部
-
speed = (speed>0)?Math.ceil(speed):Math.floor(speed); 在speed位于區(qū)間(0,1)時(shí)，ceil值為1，而floor值為0,為了蹭到iTarget處，就不能讓speed值為0； 在speed位于區(qū)間(-1,0)時(shí)，floor值為-1，而ceil值為0,為了蹭到iTarget處，就不能讓speed值為0；查看全部
-
js動(dòng)畫運(yùn)動(dòng)框架與思路查看全部
-
運(yùn)動(dòng)框架思路參考查看全部
-
鏈?zhǔn)絼?dòng)畫，在startMove(obj,attr,iTarget,fn)再加一個(gè)fn參數(shù)，并在清除動(dòng)畫之后，加入fn方法：if(fn){fn();} 在主頁中，在三個(gè)參數(shù)之后再加入一個(gè)參數(shù) startMove(Li,'width',400,function(){ startMove(Li,'height',200,function(){ startMove(Li,'opacity',100); }) })查看全部
-
Math.round()，四舍五入 設(shè)置透明度： 對(duì)IE瀏覽器：filter:alpha(opacity:30); 對(duì)其他瀏覽器：opacity: 0.3; startMove(this,'opacity',100),this指代這個(gè)Li1,opacity是參數(shù)，也可以是width或者h(yuǎn)eight,100為目標(biāo)值，透明度的目標(biāo)值。 Li1.onmouseover=function(){ startMove(this,'opacity',100); } 用getStyle這個(gè)方法去獲取樣式比用setoffWidth,更加準(zhǔn)備，getStyle(obj,'width');是獲取屬性值，setoffWidth是獲取整個(gè)盒子的值。（加邊框） function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
獲取樣式 currentStyle[attr] (IE) getComputedStyle(obj,false)[attr] (firefox)查看全部
舉報(bào)
0/150
提交
取消