Posted in Javascript onFebruary 27, 2015
本文实例讲述了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=utf-8" /> <title>鼠标感应的图片展示效果</title> <!--[if lte IE 6]> <script language="Javascript"> var W3CDOM = (document.createElement() && document.getElementsByTagName()); window.onload = pinballEffect; function pinballEffect() { if (!W3CDOM) return; var allElements = document.getElementsByTagName('*'); var originalBackgrounds=new Array(); for (var i=0; i<allElements.length; i++) { if (allElements[i].className.indexOf('hovereffect') >= 0) { allElements[i].onmouseover = mouseGoesOver; allElements[i].onmouseout = mouseGoesOut; } } } function mouseGoesOver() { originalClassNameString = this.className; this.className += " lay-on"; } function mouseGoesOut() { this.className = originalClassNameString; } pinballEffect(); </script> <![endif]--> <style type="text/css"> body { background:#fff; font:small/1.5 "宋体", SimSun, serif; _font-size:medium; } a img { border:none; } ul, li, h5 { list-style:none inside; margin:0; padding:0; } .recomm { background:#999; border:1px solid #666; width:600px; height:170px; overflow:hidden; padding:10px; margin:0 auto; position:relative; } .recomm ul { border:1px solid #fff; border-left:none; height:168px; width:599px; overflow:hidden; *position:absolute; /* 解决IE中overflow:hidden无法正确隐藏元素的问题 */ } .recomm li { float:left; position:relative; margin-right:-179px; height:100%; overflow:hidden; white-space:nowrap; text-align:center; } .recomm li img { display:block; border-left:1px solid #fff; width:248px; height:168px; } .recomm li h5 { position:absolute; bottom:0; left:0; height:20px; width:239px; line-height:20px; background:url(../images/1_211621.png) no-repeat; display:none; text-align:right; padding-right:10px; font-size:1em; font-weight:normal; } .recomm li:hover, .recomm .lay-on { width:249px; margin-right:0; } .recomm li:hover h5, .recomm .lay-on h5 { display:block; } </style> </head> <body> <div class="recomm"> <ul> <li class="hovereffect"><a href="/" title="观赏该图片详细信息"><img src="/images/m01.jpg" alt="红叶传情" title="这里是图片标题" /></a> <h5>红叶传情 By <a href="/" title="访问代码家园">代码家园</a> 2010.09.23</h5> </li> <li class="hovereffect"><a href="/" title="观赏该图片详细信息"><img src="/images/m02.jpg" alt="野花绽放" title="这里是图片标题" /></a> <h5>野花绽放 By <a href="/" title="访问珊珊影视在线">珊珊影视在线</a> 2010.09.23</h5> </li> <li class="hovereffect"><a href="/" title="观赏该图片详细信息"><img src="/images/m03.jpg" alt="往事如茶" title="这里是图片标题" /></a> <h5>往事如茶 By <a href="/" title="访问代码家园">代码家园</a> 2010.09.23</h5> </li> <li class="hovereffect"><a href="/" title="观赏该图片详细信息"><img src="/images/m04.jpg" alt="油菜花开" title="这里是图片标题" /></a> <h5>油菜花开 By <a href="/" title="访问七彩影视">七彩影视</a> 2010.09.23</h5> </li> <li class="hovereffect"><a href="/" title="观赏该图片详细信息"><img src="/images/m05.jpg" alt="玫瑰情思" title="这里是图片标题" /></a> <h5>玫瑰情思 By <a href="/" title="访问代码家园">代码家园</a> 2010.09.23</h5> </li> <li class="hovereffect"><a href="/" title="观赏该图片详细信息"><img src="/images/m09.jpg" alt="小雏菊" title="这里是图片标题" /></a> <h5>小雏菊 By <a href="/" title="访问珊珊影视在线">珊珊影视</a> 2010.09.23</h5> </li> </ul> </div> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。
js实现鼠标感应图片展示的方法
- Author -
代码家园声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@