鼠标感应背景颜色渐隐切换效果

作者:sky 点击:161 评论:0 发布时间:周一, 11/14/2011 - 16:04 所属分类:色彩特效

鼠标经过li行颜色改变，快速滑动渐隐切换效果。

<!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=gb2312"> <meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效网" /> <meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。以质量为核心，以实用为目的,全力打造一流网页特效站" /> <title>站长特效鼠标感应背景颜色渐隐切换效果站长特效网</title> <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_zzjs_net{width:270px;padding:10px 10px 20px;overflow:hidden;margin:20px auto 0;border:1px solid #FFF;} .internal{width:266px;float:left;} #box_zzjs_net h2{height:38px;border-bottom:1px solid #ccc;padding-left:5px;} #box_zzjs_net h2 strong{float:left;line-height:38px;color:#885050;} #box_zzjs_net 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_zzjs_net li{height:30px;position:relative;border-bottom:1px dashed #ccc;} #box_zzjs_net li div,#box_zzjs_net li p{height:30px;position:absolute;top:0;left:0;width:100%;} #box_zzjs_net li p{background:#fff;opacity:0;filter:alpha(opacity=0);} #box_zzjs_net li div a,#box_zzjs_net li div span{line-height:30px;font-size:12px;height:30px;} #box_zzjs_net li div a{float:left;padding-left:5px;color:#7F5454;width:185px;overflow:hidden;} #box_zzjs_net li div span{padding-right:10px;float:right;color:#CF9494;} </style> <script type="text/javascript"> window.onload=function() { var oLeave=new Leave('box_zzjs_net'); };//欢迎来到站c长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。 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]) }; } }//欢迎来到站长q特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。 Leave.prototype.startMove=function (obj) { obj.times && clearInterval(obj.time); obj.times=setInterval(function() { _this.doMove(obj); },10); }//欢迎来到站长特x效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。 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; }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。 </script> </head> <body> <a href="http://www.zzjs.net/">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！zzjs.net，站长js特效。<hr>  <script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script> <div id="box_zzjs_net"> <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:;">站长特效二号新闻标题</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:;">站长特效五号新闻标题</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>

提示：你可以先修改部分代码再运行。

顶一下

(3)

100%

踩一下

(0)

标签: