七、多屬性封裝函數
前面分別介紹了單獨改變單一屬性值得動畫,從本節起開始介紹多屬性封裝函數,一個函數搞定多種屬性值的改變。
首先介紹一個很重要的函數getStyle(),這個函數傳回一個元素的目前屬性值。兩個形參分別是元素和屬性。注意瀏覽器的相容性問題。
//获得元素样式专用封装函数,返回该属性的当前值 function getStyle(obj,attr) { if (obj.currentStyle) {//IE浏览器 return obj.currentStyle[attr]; } else { return getComputedStyle(obj,false)[attr];//火狐浏览器 } }
接下來重點來了,一個函數實現改變多種屬性的動畫:
//多物体改变样式(宽,高,字体大小,边框等,透明度需单独分析)速度缓冲封装函数 function startMove(obj,attr,target) {//元素,改变的样式属性,达到的目标值 clearInterval(obj.timer);//首先清除定时器 obj.timer=setInterval(function(){ //1.取当前值 var icur=0;//icur返回物体样式属性值的大小 if (attr=='opacity') {//如果属性是透明度,透明度的返回值是零点几的小数 icur=Math.round(parseFloat(getStyle(obj,attr))*100);//round函数避免透明度值在小数之间来回跳动 } else { icur=parseInt(getStyle(obj,attr)); } //2.算速度 var speed=(target-icur)/8;//分母为比例系数K,可调 speed=speed>0?Math.ceil(speed):Math.floor(speed);//缓冲速度要取整,不然移动不到终点就停止 //3.检测运动是否停止 if (icur==target) { clearInterval(obj.timer); } else { if (attr=='opacity') { obj.style.filter='alpha(opacity:'+(icur+speed)+')';//IE浏览器 obj.style.opacity=(icur+speed)/100;//火狐浏览器 } else { obj.style[attr]=icur+speed+'px'; } } },30) }
我們透過兩個div來驗證一下:
<style type="text/css"> #div1,#div2{ width: 200px; height: 200px; background: red; border: 1px solid black; margin-bottom: 10px; } </style>
<div id="div1"></div> <div id="div2"></div> <script type="text/javascript"> window.onload=function(){ var ob1=document.getElementById('div1'); var ob2=document.getElementById('div2'); ob1.onmouseover=function(){ startMove(this,'width',400); } ob1.onmouseout=function(){ startMove(this,'width',200); } ob2.onmouseover=function(){ startMove(this,'opacity',31); } ob2.onmouseout=function(){ startMove(this,'opacity',100); } //alert(parseFloat(0.07*100));弹出7.00000000001而不是7 所以上面程序中的parseFloat前加四舍五入Math.round函数 } </script>
這樣就實現了透過一個startMove()函數實現改變物體的寬廣度和透明度了。
八、鍊式運動
上面講的都是一個事件激發一個運動,本節介紹一個div的寬、高、透明度的鍊式運動。在上面的startMove函數基礎上加一個形參fn,作為回調函數;在程式內部的偵測運動是否停止部分加一個判斷:if(fn) fn();在程式碼18行:
//多物体改变样式(宽,高,字体大小,边框等,透明度单独分析)速度缓冲封装函数 function startMove(obj,attr,target,fn) {//元素,改变的样式属性,达到的目标值,回调函数 clearInterval(obj.timer); obj.timer=setInterval(function(){ //1.取当前值 var icur=0;//icur返回物体样式属性值的大小 if (attr=='opacity') {//如果属性是透明度,透明度的返回值是零点几的小数 icur=Math.round(parseFloat(getStyle(obj,attr))*100);//round函数避免透明度值在小数之间来回跳动 } else { icur=parseInt(getStyle(obj,attr)); } //2.算速度 var speed=(target-icur)/8;//分母为比例系数K,可调 speed=speed>0?Math.ceil(speed):Math.floor(speed);//缓冲速度要取整,不然移动不到终点就停止 //3.检测运动是否停止 if (icur==target) { clearInterval(obj.timer); if(fn){//上一个运动停止后判断一下是否还有下一个运动,如果有的话就执行回调函数 fn(); } } else { if (attr=='opacity') { obj.style.filter='alpha(opacity:'+(icur+speed)+')';//IE浏览器 obj.style.opacity=(icur+speed)/100;//火狐浏览器 } else { obj.style[attr]=icur+speed+'px'; } } },30) }
下面是個簡單的div
<style type="text/css"> #div1{ width: 200px; height: 200px; background: red; border: 2px solid black; filter: alpha(opacity:30); opacity: 0.3; } </style>
注意看js部分的函數巢狀:
<div id="div1"></div> <script type="text/javascript"> window.onload=function(){ var ob1=document.getElementById('div1'); ob1.onmouseover=function(){ startMove(ob1,'width',400,function(){ startMove(ob1,'height',400,function(){ startMove(ob1,'opacity',100); }) }); } ob1.onmouseout=function(){ startMove(ob1,'opacity',30,function(){ startMove(ob1,'height',200,function(){ startMove(ob1,'width',200); }) }); } }
滑鼠離開的變化順序與滑鼠經過時的相反。
以上就是js動畫學習(四)的內容,更多相關內容請關注PHP中文網(m.sbmmt.com)!