-
獲取樣式的函數查看全部
-
1、速度的定義： var speed=(目標值-當前值（offset）)/參數； 2、取整函數： 向下取整：Math.floor(3.55);//3.55是取整的數值，結果為：3 向上取整：Math.ceil(3.35);//結果為：4 3、速度的取整判斷： speed=speed>0?Math.ceil(speed):Math.floor(speed);// 條件操作位 這個表達式的意思是如果speed大于0（關系表達式返回true），則將Math.ceil(speed)向下去整賦值給 speed，反之則將Math.floor(speed)向上去整賦值給 speed查看全部
-
var flag = true; 這句要放在定時器setInterval()器里面，才能解決鏈式運動（Fn）無法實現的問題。查看全部
-
function getStyle(obj,attr){ if(obj.currentStyle){ //IE return obj.currentStyle[attr]; } else { return getComputedStyle(obj,false)[attr]; } } //json = {attr1:iTarget1,attr2:iTarget2} function startMove(obj,json,fn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var flag = true; //標志所有運動是否到達目標值 for(var attr in json){ //取當前值 var icur = 0; if(attr == 'opacity'){ icur = Math.round(parseFloat(getStyle(obj,attr))*100); } else { icur = parseInt(getStyle(obj,attr)); } //求速度 var speed = (json[attr]-icur)/8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if(icur != json[attr]){ flag = false; } if(attr == 'opacity'){ obj.style.filter = 'alpha(opacity:'+(icur+speed)+')'; //IE obj.style.opacity = (icur+speed)/100; } else { obj.style[attr] = icur + speed +'px'; } if(flag) { clearInterval(obj.timer); flag = true; if(fn){ fn(); } } } },20); }查看全部
-
offsetwidth:是元素相對父元素的偏移寬度。等于border+padding+width 而width僅僅是自身的寬度 獲取樣式，解決兼容性 //obj 節點對象 //attr 屬性名 2.function getStyle(obj, attr){ if(obj.currentStyle){ return obj.currentStyle[attr];//IE } else { return getComputedStyle(obj,false)[attr]; } }查看全部
-
多物體運動 1. for循環來為每一個TagNameList[i]添加事件 并添加屬性來區分各自的定時器(用于取消) 2. 利用參數中的this來指定所選擇的當前元素 3. 多物體不要共用一個值,在對象上定義一個單獨的屬性 （存在多項共用一個值，并且這個值會發生改變時，最好單獨給賦值，避免出現爭用的情況。） <script> window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++){ // 給每一個li設置一個timer，才不會致使他們去搶timer 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); } } };查看全部
-
鼠標快速移入移出有bug，待解決 △一般使用動畫時，都要運用向上向下取整 1、速度的定義： var speed=(目標值-當前值（offset）)/參數； 2、取整函數： 向下取整：Math.floor(3.55);//3.55是取整的數值，結果為：3 向上取整：Math.ceil(3.35);//結果為：4 3、速度的取整判斷： speed=speed>0?Math.ceil(speed):Math.floor(speed);//查看全部
-
透明度的調試查看全部
-
$(function()){ $('#move a').mouseenter(function(){ $(this).find('i').animate({top:"-25px",opacity:"0"},300) $(this).css({top:"30px"}); $(this).animate({top:"20px",opacity:"1"},200) }) }查看全部
-
window.onload=function(){<br> var oMove=document.getElementById('move');<br> var alist=oMove.getElementByTagName('a');<br> for( var i=0;i<aList.length;i++){<br> aList[i].onmouseover=function(){<br> var _this=this.getElementByTagName('i')[0];<br> startMove(_this,{top:-25,opacity:0},function(){ _this.style.top=30+'px'; startMove(_this,{top:20:opacity:100}) });<br> }<br> }<br> }查看全部
-
json:完美運動框架 屬性和目標值是一對鍵值對attr/iTarget json實現多對值的變化 startMove(obj,{attr1:iTartget1,attr2:iTartget2},fn); startMove(obj,json,fn){}查看全部
-
回調函數，一層一層嵌套<br> onmouseover從外到里<br> onmouseout從里到外 框架里四個參數查看全部
-
回調函數：fn查看全部
-
1、獲取當前透明度不用parseInt<br> 2、設置透明度要考慮兼容<br> obj.style.filter='alpha(opacity:'+(當前透明度+變化速度)+')';<br> obj.style.opacity=(當前透明度+變化速度)/100;<br>針對chrome和火狐瀏覽器 3、透明度不加“px”<br> 在使用parseInt()時處理透明度小數時,會有影響 單位設置<br> 相應位置進行判斷 IE/FireFox<br> 取相應值 Math.round()四舍五入取整數值<br> Math.round(parseFloat(getStyle(obj,attr))*100)查看全部
-
function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } }查看全部
舉報
0/150
提交
取消