js实现鼠标滑过文字链接色彩变化的效果

2019-11-20 12:32:24

字体：大中小

来源：转载

供稿：网友

本文实例讲述了js实现鼠标滑过文字链接色彩变化效果的方法。分享给大家供大家参考。具体实现方法如下：

<!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" /><title>鼠标移入移出效果</title><style>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 d=document; var oBox=d.getElementById('box'); var aLi=oBox.getElementsByTagName('li'); var i=0; for(i=0;i<aLi.length;i++) { var oP=aLi[i].getElementsByTagName('p')[0]; oP.iAlpha=0; oP.times=null; aLi[i].onmouseover=function() { oP=this.getElementsByTagName('p')[0]; oP.times && clearInterval(oP.times); oP.style.opacity=1; oP.style.filter="alpha(opacity=100)"; oP.iAlpha=100; }; aLi[i].onmouseout=function() { startMove(this.getElementsByTagName('p')[0]) }; }};function startMove(obj){ obj.times && clearInterval(obj.time); obj.times=setInterval(function() { doMove(obj); },10);}function doMove(obj){ var iSpeed=5; if(obj.iAlpha<=iSpeed) { clearInterval(obj.times); obj.iAlpha=0; obj.time=null; } else { obj.iAlpha-=iSpeed; } obj.style.filter="alpha(opacity="+obj.iAlpha+")"; obj.style.opacity=obj.iAlpha/100;}</script></head><body><div id="box"> <div class="internal"> <h2><strong>网页特效代码</strong> <a href="//www.VeVB.COm/">more</a></h2> <ul>  <li>  <p></p>  <div>   <a href="//www.VeVB.COm/"> 广告代码特效大全 </a>   <span>2011-09-10</span>  </div>  </li>  <li>  <p></p>  <div>   <a href="//www.VeVB.COm/"> JS特效代码集锦 </a>   <span>2011-09-10</span>  </div>  </li>  <li>  <p></p>  <div>   <a href="//www.VeVB.COm/">商业网页模板与光盘素材</a>   <span>2011-09-10</span>  </div>  </li>  <li>  <p></p>  <div>   <a href="//www.VeVB.COm/">网页制作教程</a>   <span>2011-09-10</span>  </div>  </li>  <li>  <p></p>  <div>   <a href="//www.VeVB.COm/">网站源码整站源代码下载</a>   <span>2011-09-10</span>  </div>  </li>  <li>  <p></p>  <div>   <a href="//www.VeVB.COm/"> 网页电子书下载 </a>   <span>2011-09-10</span>  </div>  </li>  <li>  <p></p>  <div>   <a href="//www.VeVB.COm/"> 免费网页模板下载 </a>   <span>2011-09-10</span>  </div>  </li> </ul> </div></div></body></html>

希望本文所述对大家的javascript程序设计有所帮助。

上一篇：浅谈NodeJS中require路径问题

下一篇：JS实现文字掉落效果的方法