js实现鼠标感应图片展示的方法

本文实例讲述了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程序设计有所帮助。

声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:notice#cainiaojc.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。