js动画--封装透明度

最新推荐文章于 2024-07-25 09:24:40 发布

aizhubian7623

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量75

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yuaima/p/5120379.html

版权

这一章我将讲述一些如何将透明度的变化也封装到调用函数中，对于前面几节课的介绍，已经将基本的属性封装到函数中了，宽，长等属性。关于透明度的变化还是有一点区别的，这一章我将封装透明度

先创建一个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.οnlοad=function(){
	var div=document.getElementById("div1");
	div.οnmοuseοver=function(){
		startMove(this,"opacity",100);
	}
	div.οnmοuseοut=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];
	 }
 }

转载于:https://www.cnblogs.com/yuaima/p/5120379.html

aizhubian7623

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js动画--封装透明度

这一章我将讲述一些如何将透明度的变化也封装到调用函数中，对于前面几节课的介绍，已经将基本的属性封装到函数中了，宽，长等属性。关于透明度的变化还是有一点区别的，这一章我将封装透明度先创建一个div<!DOCTYPE html><html><head><title>js动画事件</title><li...
复制链接

扫一扫