<!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> <title>网页特效-综合特效-感应鼠标变换背景颜色的列表效果-www.update8.com</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <!--把下面代码加到<head>与</head>之间--> <style type="text/css"> body,ul,h2,p{margin:0;padding:0;font-family:"微软雅黑";background:#333;} li{list-style:none;} a{text-decoration:none;} #box{width:270px;padding:10px 10px 20px;overflow:hidden;margin:20px auto 0;border:1px solid #FFF;} .internal{width:266px;float:left;} #box h2{height:38px;border-bottom:1px solid #ccc;padding-left:5px;} #box h2 strong{float:left;line-height:38px;color:#885050;} #box h2 a{float:right;width:52px;height:14px;font-size:12px;text-indent:20px;color:#fff;line-height:12px;font-weight:normal;margin-top:10px;} #box li{height:30px;position:relative;border-bottom:1px dashed #ccc;} #box li div,#box li p{height:30px;position:absolute;top:0;left:0;width:100%;} #box li p{background:#fff;opacity:0;filter:alpha(opacity=0);} #box li div a,#box li div span{line-height:30px;font-size:12px;height:30px;} #box li div a{float:left;padding-left:5px;color:#7F5454;width:185px;overflow:hidden;} #box li div span{padding-right:10px;float:right;color:#CF9494;} </style> <script type="text/javascript"> window.onload=function() { var oLeave=new Leave('box'); }; function Leave(id) { _this=this; this.oBox=document.getElementById(id); this.aLi=this.oBox.getElementsByTagName('li'); var i=0; for(i=0;i<this.aLi.length;i++) { this.aLi[i].index=i; //alert(this.aLi[i].index) this.oP=this.aLi[i].getElementsByTagName('p')[0]; this.oP.times=null; this.oP.iAlpha=0; this.aLi[i].onmouseover=function() { _this.oP=this.getElementsByTagName('p')[0]; //alert(this.aLi[i]) _this.oP.times && clearInterval(_this.oP.times); _this.oP.style.opacity=1; _this.oP.style.filter="alpha(opacity=100)"; _this.oP.iAlpha=100; }; this.aLi[i].onmouseout=function() { _this.startMove(this.getElementsByTagName('p')[0]) }; } } Leave.prototype.startMove=function (obj) { obj.times && clearInterval(obj.time); obj.times=setInterval(function() { _this.doMove(obj); },10); } Leave.prototype.doMove=function(obj) { this.iSpeed=5; if(obj.iAlpha<=this.iSpeed) { clearInterval(obj.times); obj.iAlpha=0; obj.time=null; } else { obj.iAlpha-=this.iSpeed; } obj.style.filter="alpha(opacity="+obj.iAlpha+")"; obj.style.opacity=obj.iAlpha/100; } </script> </head> <body> <!--把下面代码加到<body>与</body>之间--> <div id="box"> <div class="internal"> <h2><strong>今日新闻</strong><a href="javascript:;">more</a></h2> <ul> <li> <p></p> <div> <a href="javascript:;">六旬老太偷电脑</a> <span>2011-09-10</span> </div> </li> <li> <p></p> <div> <a href="javascript:;">自制古董骗贷10亿</a> <span>2011-09-10</span> </div> </li> <li> <p></p> <div> <a href="javascript:;">赵薇携老公女儿游台北</a> <span>2011-09-10</span> </div> </li> <li> <p></p> <div> <a href="javascript:;">比伯戏耍纳什</a> <span>2011-09-10</span> </div> </li> <li> <p></p> <div> <a href="javascript:;">1000段YouTube最火视频</a> <span>2011-09-10</span> </div> </li> <li> <p></p> <div> <a href="javascript:;">卡宾创意视频征集大赛</a> <span>2011-09-10</span> </div> </li> <li> <p></p> <div> <a href="javascript:;">单身熟女闺房大揭秘</a> <span>2011-09-10</span> </div> </li> </ul> </div> </div> </body> </html>
