-
可以使用定時器去完成速度運動，比如說定時的更改left,right,top,bottom等位置距離，會產(chǎn)生運動，定時更改width,height屬性值也會產(chǎn)生運動。 在使用定時器前要清除定時器，避免該定時器被不斷觸發(fā)，定時器疊加使運動速率加快。查看全部
-
運動框架實現(xiàn)思路 1.速度（改變值left、right、width、height、opacity） 2.緩沖運動 3.多物體運動 4.任意值變化 5.鏈式運動 6.同時運動查看全部
-
緩沖運動： 距離和速度成正比 ：speed=（itarget-oDiv.offsetLeft)/10; alert(Math.floor(3.98))向下取整 alert(Math.ceil(3.22))向上取整 遇到這種運動涉及到數(shù)字的問題都要做一個判斷，向上或者向下取整 // 從用兩個函數(shù)實現(xiàn)，到用一個函數(shù)：兩個有很多相同的部分，則相同部分可以共用，不同部分看有什么聯(lián)系 // 從傳入兩個參數(shù)到一個參數(shù)：參數(shù)傳遞盡可能的少查看全部
-
透明度動畫(透明度的改變沒有直接的屬性去改變，自定義變量alpha) 屬性: filter: alpha(opacity:30) ; 通過變量alpha存儲元素透明度來與目標值判斷 DOM元素.style.filter = 'alpha(opacity:' + alpha + ')'(非主流，IE8前) DOM元素.style.opacity = alpha / 100(主流)查看全部
-
JQuery封裝的方法調(diào)用mouseenter、animate查看全部
-
寬、高、透明度同時變化如圖 JSON(JavaScript Object Notation)是一種輕量級的數(shù)據(jù)交換格式 var json={name:key}多對值可以用逗號隔開var json={a:12,b:2} 遍歷json,用 for-in循環(huán) for(var i in json) {alert(i);//彈出對象 alert(json[i]);//彈出對象的值} 傳入的三個值要都到達目標值，才執(zhí)行停止定時器。 function getStyle(obj,attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj,false)[attr]; } } function move(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.opacity = (icur+speed)/100; obj.style.filter = 'alpha(opacity='+(icur+speed)+')'; }else{ obj.style[attr] = icur+speed+"px"; } } if(flag) { clearInterval(obj.timer); if(fn) { fn(); } } }, 30) }查看全部
-
var timer3 = null; function startMove3(iTarget){ clearInterval(timer3); var box3 = document.getElementById("box3"); timer3 = setInterval(function(){ var speed = (iTarget - box3.offsetLeft)/20; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if(box3.offsetLeft == iTarget){ clearInterval(timer3); }else{ box3.style.left = box3.offsetLeft + speed + "px"; } },30)查看全部
-
var timer1 = null; var alpha = 30; function changeAlpha(iTarget){ var box2 = document.getElementById("box2"); clearInterval(timer1); timer1 = setInterval(function(){ var speed = 0; if(alpha > iTarget){ speed = -10; }else{ speed = 10; } if(alpha == iTarget){ clearInterval(timer1); }else{ alpha += speed; box2.style.filter = 'alpha(opacity:'+ alpha +')'; box2.style.opacity = alpha/100; } },30)查看全部
-
<style type="text/css"> *{ margin:0; padding:0; font-size:12px; font-family:"微軟雅黑"; } #box{ width:200px; height:200px; background:#FF0000; position:relative; left:-200px; } #share{ width:14px; color:#FFFFFF; background:#00CCFF; position:absolute; top:20px; left:200px; } </style> <script type="text/javascript"> window.onload = function(){ var box = document.getElementById("box"); box.onmouseover = function(){ startMove(0); }; box.onmouseout = function(){ startMove(-200); }; } var timer = null; function startMove(iTarget){ clearInterval(timer); var box = document.getElementById("box"); timer = setInterval(function(){ var speed = 0; if(box.offsetLeft > iTarget){ speed = -10; }else{ speed = 10; } if(box.offsetLeft == iTarget){ clearInterval(time); }else{ box.style.left = box.offsetLeft + speed + "px"; } },30) } </script> </head> <body> <div id="box"> <span id="share">分享</span> </div> </body>查看全部
-
改變透明度時出現(xiàn)的問題： 1、獲取當前透明度不用parseInt 2、設置透明度要考慮兼容 obj.style.filter='alpha(opacity:'+(當前透明度+變化速度)+')'; obj.style.opacity=(當前透明度+變化速度)/100; 3、透明度不加“px” 在使用parseInt()時處理透明度小數(shù)時,會有影響 單位設置 相應位置進行判斷 IE/FireFox 取相應值 Math.round()四舍五入取整數(shù)值 Math.round(parseFloat(getStyle(obj,attr))*100)查看全部
-
透明度+寬度整合函數(shù) 分別判斷處理 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) }查看全部
-
有border/padding屬性的div運動時不能用offsetX屬性獲取div的X,因為offsetX獲取的是div盒子的屬性 不是conten的屬性！ 在用到obj.offsetWidth或者obj.offsetHeight的時候，如果，obj對象的樣式有border等屬性，則需要用getStyle()函數(shù)解決實際width和height值樣式不兼容的問題 //獲取style樣式 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
JQuery實現(xiàn)淘寶菜單動畫特效：使用animate函數(shù)設置動畫（與封裝的js方法類似） mouseover/mouseout: 不論鼠標指針穿過被選元素或其子元素，都會觸發(fā)。 mouseenter/mouseleave: 只有在鼠標指針穿過被選元素時，才會觸發(fā)事件。 mouseenter子元素不會反復觸發(fā)事件，否則在IE中經(jīng)常有閃爍情況發(fā)生。查看全部
-
運動框架實現(xiàn)思路 1.速度（改變值left、right、width、height、opacity） 2.緩沖運動 3.多物體運動 4.任意值變化 5.鏈式運動 6.同時運動查看全部
-
json: var json = {a:1, b:2}; for(var i in json){ alert(json[i]);//i為json里面的name值，即a、b等 }查看全部
舉報
0/150
提交
取消