js动画--封装透明度
这一章我将讲述一些如何将透明度的变化也封装到调用函数中，对于前面几节课的介绍，已经将基本的属性封装到函数中了，宽，长等属性。关于透明度的变化还是有一点区别的，这一章我将封装透明度
先创建一个div
<!DOCTYPE html> <html> <head> <title>js动画事件</title> <link href="move.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="move.js"></script> </head> <body> <div id="div1"> </div> </body> </html>
给这个div设置一些属性值(注意奥，这里面的透明度的设置)
#div1{ width:200px; height:200px; background-color:red; opacity:0.3;//火狐浏览器支持的透明度的设置 filter:alpha(opacity:30);//IE浏览器支持的方式 }
实现透明度的封装
var timer;
window.onload=function(){
var div=document.getElementById("div1");
div.onmouseover=function(){
startMove(this,"opacity",100);
}
div.onmouseout=function(){
startMove(this,"opacity",30);
}
}
function startMove(obj,attr,target){
clearInterval(timer);
timer=setInterval(function(){
var icur;
if(attr=="opacity"){
icur=Math.round(parseFloat(getStyle(obj,attr))*100);//关键一步在这里，我们设置透明度属性时，getStyle获得的是0~1之间的数，所以要parseFloat一下，然后在乘以100转化到0~100之间，最后要四舍五入一下。
}else{
icur=parseInt(getStyle(obj,attr))
}
var speed=(target-icur)/8;
speed=speed>0? Math.ceil(speed):Math.floor(speed);
if(icur==target){
clearInterval(timer);
}else{
if(attr="opacity"){
obj.style.opacity=(icur+speed)/100;
obj.style.filter="alpha(opacity"+(icur+speed)+")";//还有这里，对于透明度来说，后面是没有"px"的，所以要判断一下。
}
obj.style[attr]=parseInt(getStyle(obj,attr))+speed+"px";
}
},50)
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else if(getComputedStyle){
return getComputedStyle(obj,false)[attr];
}
}
