-
offset查看全部
-
<!-- 使用js實(shí)現(xiàn)透明度運(yùn)動(dòng)而不采用直接設(shè)置css的style.opacity屬性來改變透明度,這是因?yàn)閏ss的透明度的設(shè)置是一步到位，瞬時(shí)完成的，而使用js可以實(shí)現(xiàn)漸隱特效 --> opacity是不透明度，opacity為0時(shí)表示不透明度是0也就是完全透明(效果等同于css的隱藏) filter: alpha(opacity:30); /*IE瀏覽器專用，opacity屬性值為0~100*/ opacity:0.3; /*所有主流瀏覽器都支持opacity屬性。. 注意：IE8和早期版本支持另一種過濾器屬性。像：filter:Alpha(opacity=50),而IE8版本之前的opacity屬性值是0~1*/ 【沒有直接的屬性可以改變透明度，需要定義一個(gè)alpha】查看全部
-
運(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)查看全部
-
function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else { return getComputedStyle(obj,false)[attr]; } }查看全部
-
把speed=speed>0?Math.ceil(speed):Math.floor(speed);改為if格式必須是這樣才行：if(speed>0){ var spe=Math.ceil(speed); } else{ var spe=Math.floor(speed); } if(menu.offsetLeft==tangel){ clearInterval(timer); } else{ menu.style.left=menu.offsetLeft+spe+'px'; } },30) } 否則僅僅if(speed>0){speed=Math.ceil(speed)};else{Math.floor(speed)}這樣是改不了左右運(yùn)動(dòng)離目的地有空隙的bug */查看全部
-
jQ實(shí)現(xiàn)運(yùn)動(dòng)查看全部
-
動(dòng)畫函數(shù)參數(shù)：多一個(gè)表示要“改變的元素的屬性”查看全部
-
正確獲取當(dāng)前元素的寬高查看全部
-
function startMove(obj,json,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var flag=true; //標(biāo)志所有運(yùn)動(dòng)是否到達(dá)目標(biāo)值 for(var attr in json){ var curr=0; //獲取當(dāng)前的值，設(shè)置為0下面進(jìn)行賦值 //判斷是否為透明度 if(attr=='opacity'){ curr=Math.round(parseFloat(getStyle(obj,attr))*100); //對(duì)透明度處理 }else{ curr=parseInt(getStyle(obj,attr)); //對(duì)普通的寬高處理 } //移動(dòng)速度處理 var speed=0; speed=(json[attr]-curr)/8; //json[attr]為屬性值即目標(biāo)值 speed=speed>0?Math.ceil(speed):Math.floor(speed); //取整數(shù)，將速度取整從而達(dá)到目標(biāo)值 //檢測(cè)停止 if(curr!= json[attr]){ flag=false;//檢測(cè)為false則繼續(xù)下面的操作 } if (attr=='opacity') { obj.style.filter='alpha(opacity:'+(curr+speed)+’)’;//IE瀏覽器 obj.style.opacity=(curr+speed)/100;//firefox瀏覽器 }else{ obj.style[attr]=curr+speed+'px'; } } if(flag){ //檢測(cè)為true則繼續(xù)下面的操作 clearInterval(obj.timer); if(fn){ //檢測(cè)是否有回調(diào)函數(shù)，有就執(zhí)行 fn(); } } },30); } //取樣式 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; //IE取樣式 }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
運(yùn)動(dòng)框架實(shí)現(xiàn)思路查看全部
-
一、仿照淘寶轉(zhuǎn)一圈再回來效果，直接在第一次動(dòng)畫結(jié)束后設(shè)置top到下面。 二 mouseenter 事件在鼠標(biāo)指針進(jìn)入 div 元素時(shí)觸發(fā)，唯一的區(qū)別是 onmouseenter 事件不支持冒泡。 onmouseover 事件在鼠標(biāo)指針進(jìn)入 div 元素時(shí)觸發(fā) ,在子元素上也會(huì)觸發(fā)(p 和 span)。查看全部
-
鏈?zhǔn)絼?dòng)畫，在startMove(obj,attr,iTarget,fn)再加一個(gè)fn參數(shù)，并在清除動(dòng)畫之后，加入fn方法：if(fn){fn();}查看全部
-
JS中 obj.style.attr 只能獲取行內(nèi)樣式 要獲取非行內(nèi)樣式要通過obj.currentStyle[attr]或者getComputedStyle(obj,false)[attr]方法獲取 obj.offsetWidth 返回值是數(shù)值所以不用parseInt（）；而obj.style.width獲取的是像素值查看全部
-
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)用的情況。 // 給每一個(gè)li設(shè)置一個(gè)timer，才不會(huì)致使他們?nèi)宼imer aLi[i].timer=null;查看全部
-
定時(shí)器寫法之一 setInterval(move,5,box); 參數(shù)1 ：函數(shù)名 參數(shù)2 ：時(shí)間 參數(shù)3 ：傳到函數(shù)內(nèi)的參數(shù)查看全部
舉報(bào)
0/150
提交
取消