-
获取容器对象obj某个具体属性的函数（兼容不同浏览器）： function getStyle(obj,type){ if(obj.currentStyle){ //兼容IE浏览器 return obj.currentStyle[type]; }else{ //针对Firefox浏览器 return getComputedStyle(obj,false)[attr]; } }查看全部
-
获取容器某个具体的样式： obj.currentStyle[type]; 针对IE浏览器 getComputedStyle(obj, false)[type]; 针对FireFox浏览器 比如，我要获取容器obj的宽（该容器存在border边框）： eWidth = obj.currentStyle[width] || getComputedStyle(obj,false)[width]; 而不能使用offsetWidth，因为offsetWidth获取的是整个容器（包含边框等属性）的宽。查看全部
-
改变任意属性值框架查看全部
-
[JS動畫效果 - 緩衝動畫] 速度動畫和透明度動畫都屬於「定速運動」, 而緩衝動畫則是「變速運動」 遇到變速運動的時候, 記得都要判斷一下向上取整/向下取整. 不然是都會出錯的 1、速度的定義： var speed=(目標值-當前值（offset）)/20； 2、取整函數： 向下取整：Math.floor(3.55); //3.55是取整的數值，結果為：3 向上取整：Math.ceil(3.35); //結果為：4 3、由於運算出現浮點數，而px無法顯示小數值，所以需要取整 速度的取整判斷： speed=speed > 0?Math.ceil(speed):Math.floor(speed);查看全部
-
[JS動畫效果 - 速度動畫] 用定時器去實現速度動畫. oDiv.offsetleft —> oDiv當前位置的左方位的值 在兩個函數代碼很相似的情況下, 把不同的地方找出來, 變成參數傳進去(簡化)/參考startMove(). window.onload = function() { var oDiv = document.getElementById("div1"); oDiv.onmouseover = function() { startMove(0); }; oDiv.onmouseout = function() { startMove(-200); }; }; // startMove() 就是一個簡化的例子 function startMove(iTarget) { clearInterval(timer); var oDiv = document.getElementById("div1"); var timer = setInterval(function() { var speed = 0; if (oDiv.offsetLeft > iTarget) { speed = -10; } else if (oDiv.offsetLeft < iTarget) { speed = 10; if (oDiv.offsetLeft == 0){ clearInterval(timer); } else { oDiv.style.left = oDiv.offsetLeft + speed + 'px'; } }, 30); }查看全部
-
[JS動畫效果 - 透明度動畫] 1、所有主流瀏覽器(IE,Firefox,Opera,Chrome,Safari)都支持opacity屬性。 注意：IE8和早期版本支持另一種過濾器屬性。像：filter:Alpha(opacity=100) 2、由於無法獲取對象的透明度，所以可通過變量儲存。（var alpha=初始值 alpha+=speed） window.onload = function() { var div1 = document.getElementById('div1'); div1.onmouseover = function() { startMove(100); } div1.onmouseout = function() { startMove(30); } } var timer = null; var alpha = 30; function startMove(iTarget) { var div1 = 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; div1.style.filter = 'alpha(opacity:' + alpha + ')'; div1.style.opacity = alpha / 100; } }, 50); }查看全部
-
[JS動畫效果] 運動框架實現思路： 1.速度（改變值left,right,width,height,opacity) 2.緩衝運動 3.多物體運動 4.任意值變化 5.鏈式運動 6.同時運動查看全部
-
getStyle函数 获取当前 目标模块的样式查看全部
-
获取样式可以封装一个函数getStyle(obj,atrr);在IE中使用obj.currentStyle[atrr]获取相应的atrr样式，在火狐中使用getComputedStyle(obj,false)[atrr]获取相应的atrr样式查看全部
-
元素的offsetLeft属性表示当前元素相与浏览器的左边框的位置查看全部
-
获取样式查看全部
-
缓冲运动查看全部
-
透明度变化查看全部
-
<script> window.onload=function(){ var oMain=document.getElementById('main'), oLis=oMain.getElementsByTagName('a'); for (var i = 0; i < oLis.length; i++) { oLis[i].onmouseover=function(){ var _this=this.getElementsByTagName('i')[0]; startMove(_this,{top:-20,opacity:0},function(){ _this.style.top=30+'px'; startMove(_this,{top:20,opacity:100}) }); }; } } </script> ps：把onmouseover 改成onmouseenter或者阻止事件onmouseover的冒泡查看全部
-
//最终封装的'完美移动框架' function startMove(obj,json,fn){ clearInterval(obj.timer); var flag;//标志所有运动是否到达目标值 obj.timer=setInterval(function(){ flag=true; for(var attr in json){ var curr=0; //判断是否为透明度 if(attr=='opacity'){ curr=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ curr=parseInt(getStyle(obj,attr)); } //移动速度处理 var speed=0; speed=(json[attr]-curr)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(curr!=json[attr]){ flag=false; } if (attr=='opacity') { obj.style.filter='alpha(opacity:'+(curr+speed)+")"; obj.style.opacity=(curr+speed)/100; }else{ obj.style[attr]=curr+speed+'px'; } } if(flag){ clearInterval(obj.timer); if(fn){ fn(); } } },30); } //取样式 function getStyle(obj,attr){ if(obj.currentStyle){//IE取样式 return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
举报
0/150
提交
取消