主要是利用JS的时间函数去实现的， setinterval 和 settimeout
不过此类方法容易造成时间点冲突，大家慎用，一定要耐心检查。
| <!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"> *{ margin:0px; padding:0px;} ul,li{ display:block; list-style:none;} .ul_1 li{ height:300px; width:300px; margin-top:5px; margin-left:10px; float:left; background:#00F; line-height:25px; color:#fff; opacity:0.3; filter:Alpha(opacity=30);} </style> </head> <body> <ul class="ul_1"> <li>sss</li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <script> window.onload = function(){ var ul_1 = document.getElementsByTagName('ul')[0]; var li = ul_1.getElementsByTagName('li'); //var opcity = new Array(); for(i=0;i<li.length;i++){ li[i].opcity = 30;//初始化透明度 li[i].times = null; li[i].onmouseover = function(e){ clearInterval(this.times); start_obcity(this,100); } li[i].onmouseout = function(e){ clearInterval(this.times); start_obcity(this,30); } } } function start_obcity(obj,opcity){ obj.times = setInterval(function(){ if(obj.opcity == opcity){ clearInterval(obj.times); }else{ if(obj.opcity>opcity){ alpha = obj.opcity-=10; }else{ alpha = obj.opcity+=10; } obj.style.filter = 'alpha(opacity:'+alpha+')'; obj.style.opacity = alpha/100; } },30); } </script> </body> </html> |
