这篇文章主要介绍了js实现鼠标感应图片展示的方法,实例分析了javascript鼠标事件及样式的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了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; /* 解决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-600) 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程序设计有所帮助。
以上就是js实现鼠标感应图片展示的方法的详细内容，更多请关注本站其它相关文章！
