js函數封裝，使一個obj的透明度漸層，淡入淡出（相容IE），jsobj
<!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，預設為1if(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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
