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

本文实例讲述了js实现鼠标感应图片展示的方法。分享给大家供大家参考。具体实现方法如下：

复制代码 代码如下:






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; 
}
.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;
}

• 
  红叶传情 By 代码家园 2010.09.23
  


• 
  野花绽放 By 珊珊影视在线 2010.09.23
  


• 
  往事如茶 By 代码家园 2010.09.23
  


• 
  油菜花开 By 七彩影视 2010.09.23
  


• 
  玫瑰情思 By 代码家园 2010.09.23
  


• 
  小雏菊 By 珊珊影视 2010.09.23
  

希望本文所述对大家的javascript程序设计有所帮助。