js函式封裝，使一個obj的透明度漸變，淡入淡出（相容IE）
阿新 • • 發佈：2018-12-31
<!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>