标签：
<!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>
js函数封装，使一个obj的透明度渐变，淡入淡出（兼容IE）
标签：
原文地址：http://blog.csdn.net/jingshui1234/article/details/45664357
