js实现鼠标滑过文字链接色彩变化的效果
本文实例讲述了js实现鼠标滑过文字链接色彩变化效果的方法。分享给大家供大家参考。具体实现方法如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-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:10px10px20px; overflow:hidden;margin:20pxauto0; border:1pxsolid#FFF; } .internal{width:266px;float:left;} #boxh2{ height:38px;border-bottom:1pxsolid#ccc; padding-left:5px; } #boxh2strong{ float:left;line-height:38px; color:#885050; } #boxh2a{ float:right;width:52px;height:14px; font-size:12px;text-indent:20px; color:#fff;line-height:12px; font-weight:normal;margin-top:10px; } #boxli{ height:30px;position:relative; border-bottom:1pxdashed#ccc; } #boxlidiv,#boxlip{ height:30px;position:absolute; top:0;left:0;width:100%; } #boxlip{ background:#fff;opacity:0; filter:alpha(opacity=0); } #boxlidiva,#boxlidivspan{ line-height:30px; font-size:12px;height:30px; } #boxlidiva{ float:left;padding-left:5px; color:#7F5454;width:185px; overflow:hidden; } #boxlidivspan{ padding-right:10px; float:right;color:#CF9494; } </style> <scripttype="text/javascript"> window.onload=function() { vard=document; varoBox=d.getElementById('box'); varaLi=oBox.getElementsByTagName('li'); vari=0; for(i=0;i<aLi.length;i++) { varoP=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]) }; } }; functionstartMove(obj) { obj.times&&clearInterval(obj.time); obj.times=setInterval(function() { doMove(obj); },10); } functiondoMove(obj) { variSpeed=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> <divid="box"> <divclass="internal"> <h2><strong>网页特效代码</strong> <ahref="https://www.nhooo.com/">more</a></h2> <ul> <li> <p></p> <div> <ahref="https://www.nhooo.com/">广告代码特效大全</a> <span>2011-09-10</span> </div> </li> <li> <p></p> <div> <ahref="https://www.nhooo.com/">JS特效代码集锦</a> <span>2011-09-10</span> </div> </li> <li> <p></p> <div> <ahref="https://www.nhooo.com/">商业网页模板与光盘素材</a> <span>2011-09-10</span> </div> </li> <li> <p></p> <div> <ahref="https://www.nhooo.com/">网页制作教程</a> <span>2011-09-10</span> </div> </li> <li> <p></p> <div> <ahref="https://www.nhooo.com/">网站源码整站源代码下载</a> <span>2011-09-10</span> </div> </li> <li> <p></p> <div> <ahref="https://www.nhooo.com/">网页电子书下载</a> <span>2011-09-10</span> </div> </li> <li> <p></p> <div> <ahref="https://www.nhooo.com/">免费网页模板下载</a> <span>2011-09-10</span> </div> </li> </ul> </div> </div> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。