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=utf-8"/> <title>鼠标感应的图片展示效果</title> <!--[iflteIE6]> <scriptlanguage="Javascript"> varW3CDOM=(document.createElement()&&document.getElementsByTagName()); window.onload=pinballEffect; functionpinballEffect() { if(!W3CDOM)return; varallElements=document.getElementsByTagName('*'); varoriginalBackgrounds=newArray(); for(vari=0;i<allElements.length;i++) { if(allElements[i].className.indexOf('hovereffect')>=0) { allElements[i].onmouseover=mouseGoesOver; allElements[i].onmouseout=mouseGoesOut; } } } functionmouseGoesOver() { originalClassNameString=this.className; this.className+="lay-on"; } functionmouseGoesOut() { this.className=originalClassNameString; } pinballEffect(); </script> <![endif]--> <styletype="text/css"> body{ background:#fff; font:small/1.5"宋体",SimSun,serif; _font-size:medium; } aimg{ border:none; } ul, li, h5{ list-style:noneinside; margin:0; padding:0; } .recomm{ background:#999; border:1pxsolid#666; width:600px; height:170px; overflow:hidden; padding:10px; margin:0auto; position:relative; } .recommul{ border:1pxsolid#fff; border-left:none; height:168px; width:599px; overflow:hidden; *position:absolute; /*解决IE中overflow:hidden无法正确隐藏元素的问题*/ } .recommli{ float:left; position:relative; margin-right:-179px; height:100%; overflow:hidden; white-space:nowrap; text-align:center; } .recommliimg{ display:block; border-left:1pxsolid#fff; width:248px; height:168px; } .recommlih5{ 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; } .recommli:hover,.recomm.lay-on{ width:249px; margin-right:0; } .recommli:hoverh5,.recomm.lay-onh5{ display:block; } </style> </head> <body> <divclass="recomm"> <ul> <liclass="hovereffect"><ahref="/"title="观赏该图片详细信息"><imgsrc="/images/m01.jpg"alt="红叶传情"title="这里是图片标题"/></a> <h5>红叶传情By<ahref="/"title="访问代码家园">代码家园</a>2010.09.23</h5> </li> <liclass="hovereffect"><ahref="/"title="观赏该图片详细信息"><imgsrc="/images/m02.jpg"alt="野花绽放"title="这里是图片标题"/></a> <h5>野花绽放By<ahref="/"title="访问珊珊影视在线">珊珊影视在线</a>2010.09.23</h5> </li> <liclass="hovereffect"><ahref="/"title="观赏该图片详细信息"><imgsrc="/images/m03.jpg"alt="往事如茶"title="这里是图片标题"/></a> <h5>往事如茶By<ahref="/"title="访问代码家园">代码家园</a>2010.09.23</h5> </li> <liclass="hovereffect"><ahref="/"title="观赏该图片详细信息"><imgsrc="/images/m04.jpg"alt="油菜花开"title="这里是图片标题"/></a> <h5>油菜花开By<ahref="/"title="访问七彩影视">七彩影视</a>2010.09.23</h5> </li> <liclass="hovereffect"><ahref="/"title="观赏该图片详细信息"><imgsrc="/images/m05.jpg"alt="玫瑰情思"title="这里是图片标题"/></a> <h5>玫瑰情思By<ahref="/"title="访问代码家园">代码家园</a>2010.09.23</h5> </li> <liclass="hovereffect"><ahref="/"title="观赏该图片详细信息"><imgsrc="/images/m09.jpg"alt="小雏菊"title="这里是图片标题"/></a> <h5>小雏菊By<ahref="/"title="访问珊珊影视在线">珊珊影视</a>2010.09.23</h5> </li> </ul> </div> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。