鼠标滑过文章列表，渐隐渐显闪亮效果

　　JavaScript+CSS实现一个鼠标滑过文章列表，渐隐渐显闪亮效果，也可认为是鼠标移入移出，会发现有光影效果划过，增加几分动感元素，让你的内容列表更加生动，更吸引用户，获得更好的用户体验。

　　示例：

<!DOCTYPE html> <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>今日新闻<a href="javascript:;">more</a></h2> <ul> <li> <div> <a href="javascript:;"> 六旬老太偷电脑 </a> 2011-09-10 </div> </li> <li> <div> <a href="javascript:;"> 自制古董骗贷10亿 </a> 2011-09-10 </div> </li> <li> <div> <a href="javascript:;">赵薇携老公女儿游台北</a> 2011-09-10 </div> </li> <li> <div> <a href="javascript:;">比伯戏耍纳什</a> 2011-09-10 </div> </li> <li> <div> <a href="javascript:;">1000段YouTube最火视频</a> 2011-09-10 </div> </li> <li> <div> <a href="javascript:;"> 卡宾创意视频征集大赛 </a> 2011-09-10 </div> </li> <li> <div> <a href="javascript:;"> 单身熟女闺房大揭秘 </a> 2011-09-10 </div> </li> </ul> </div> </div> </body> </html> <center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

热点

鼠标滑过文章列表，渐隐渐显闪亮效果

由 dawei

您错过了

AI在情感识别与计算领域的运用

AI在交通管理与规划领域的应用

AI在提升公共安全管理效率和效果方面的应用与成效分析

人工智能技术正在推动图书馆的管理和服务向更高水平发展

鼠标滑过文章列表，渐隐渐显闪亮效果

由 dawei

相关文章

使用softaculous创建WordPress临时站点

怎样建网站更有利于网站推广和优化？

中企动力带你了解舌尖上的餐饮网站设计趋势

您错过了

AI在情感识别与计算领域的运用

AI在交通管理与规划领域的应用

AI在提升公共安全管理效率和效果方面的应用与成效分析

人工智能技术正在推动图书馆的管理和服务向更高水平发展