js函数封装，使一个obj的透明度渐变，淡入淡出（兼容IE）

浏览数：18 / 时间：2015年06月09日

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	*{padding:0; margin:0;}
	li{ list-style:none;}
	#main{ width:580px; height:400px; margin:0 auto; margin-top:200px; border:1px solid #000; padding:10px; position:relative;}
	#main ul{}
	#main ul li{ position:absolute; bottom:10px; width:58px; line-height:58px; font-size:30px; text-align:center; z-index:3; }
	#main div{ position:absolute; left:10px; bottom:10px; width:0; height:60px; background:#06F; opacity:1; filter:alpha(opacity=100);}
</style>
<script type="text/javascript">
	window.onload = function(){
		var oMain = document.getElementById('main');
		var aLi = oMain.getElementsByTagName('li');
		var oDiv = oMain.getElementsByTagName('div')[0];
		for( var i = 0; i< aLi.length; i++){
			aLi[i].style.left = 10+ i*58 + 'px' ;	
		}
		function liRun(){
			var num = 0;
			clearInterval( oMain.timer );
			oMain.timer = setInterval( function(){
				doMove( aLi[num], 'bottom', 10, 350 );
				setOpacity( aLi[num],0,3 );
				num ++;
				if ( num === aLi.length ) {
					clearInterval( timer );
				}
			},100 );	
		}
		function divRun(){
			doMove( oDiv, 'width', 15, 580 );
			setOpacity( oDiv,0,1 );
		}
		liRun();
		divRun();
		function setOpacity(element, transparency, speed, callback){//透明度渐变：transparency:透明度 0(全透)-100(不透)；speed:速度1-100，默认为1
			if(typeof(element)=='string')element=document.getElementById(element);
			if(!element.effect){
				element.effect = {};
				element.effect.fade=0;
			}
			clearInterval(element.effect.fade);
			var speed=speed||1;
			var start=(function(elem){
				var alpha;
				if(navigator.userAgent.toLowerCase().indexOf('msie') != -1){
						alpha=elem.currentStyle.filter.indexOf("opacity=") >= 0?(parseFloat( elem.currentStyle.filter.match(/opacity=([^)]*)/)[1] )) + '':
						'100';
				}else{
						alpha=100*elem.ownerDocument.defaultView.getComputedStyle(elem,null)['opacity'];
				}
				return alpha;
			})(element);
			if(window.console&&window.console.log)console.log('start: '+start+" end: "+transparency);
			element.effect.fade = setInterval(function(){
				start = start < transparency ? Math.min(start + speed, transparency) : Math.max(start - speed, transparency);
				element.style.opacity =  start / 100;
				element.style.filter = 'alpha(opacity=' + start + ')';
				if(Math.round(start) == transparency){
					element.style.opacity =  transparency / 100;
					element.style.filter = 'alpha(opacity=' + transparency + ')';
					clearInterval(element.effect.fade);
					if(callback)callback.call(element);
				}
		}, 20);
	}
	
	function doMove(obj,attr,dir,target,endFn ){//要移动的目标，目标要改变的属性，方向（移动的速度值），目标值，回调函数（可省略）
		dir = parseInt(getStyle(obj,attr)) < target ? dir : -dir;
		clearInterval( obj.timer );	
		obj.timer = setInterval(function(){
			var speed = parseInt(getStyle(obj,attr))+ dir ;
			if( speed >= target && dir > 0 || speed <= target && dir < 0 )speed = target;
			obj.style[attr] = speed + 'px';
			if( speed == target ){
				clearInterval( obj.timer );	
				endFn && endFn();
			}
			
		},20);	
	}

	function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj ,false)[attr]; }
	};	
</script>
</head>

<body>
<div id="main">
    <ul>
        <li>+1</li>
        <li>+1</li>
        <li>+1</li>
        <li>+1</li>
        <li>+1</li>
        <li>+1</li>
        <li>+1</li>
        <li>+1</li>
        <li>+1</li>
        <li>+1</li>
    </ul>
    <div id="shade"></div>
</div>
</body>
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。