用js+css制作的网页图片切换展示特效，当用户的鼠标经过时显示整张图片，实用的鼠标感应图片展示特效代码。
<!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=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<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;
}
.www_wuming_ren {
background:#999;
border:1px solid #666;
width:600px;
height:170px;
overflow:hidden;
padding:10px;
margin:0 auto;
position:relative;
}
.www_wuming_ren ul {
border:1px solid #fff;
border-left:none;
height:168px;
width:599px;
overflow:hidden;
*position:absolute; /* 解决IE中overflow:hidden无法正确隐藏元素的问题 */
}
.www_wuming_ren li {
float:left;
position:relative;
margin-right:-179px;
height:100%;
overflow:hidden;
white-space:nowrap;
text-align:center;
}
.www_wuming_ren li img {
display:block;
border-left:1px solid #fff;
width:248px;
height:168px;
}
.www_wuming_ren li h5 {
position:absolute;
bottom:0;
left:0;
height:20px;
width:239px;
line-height:20px;
background:url(/img/1_211621.png) no-repeat;
display:none;
text-align:right;
padding-right:10px;
font-size:1em;
font-weight:normal;
}
.www_wuming_ren li:hover, .www_wuming_ren .lay-on {
width:249px;
margin-right:0;
}
.www_wuming_ren li:hover h5, .www_wuming_ren .lay-on h5 {
display:block;
}
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div class="www_wuming_ren">
<ul>
<li class="hovereffect"><a href="https://www.wuming.ren" title="观赏该图片详细信息"><img src="/img/20240516_www_wuming_ren_6.jpg" alt="图片1" title="这里是图片标题" /></a>
<h5>By <a href="https://www.wuming.ren" title="访问武鸣人">武鸣人</a> 3-31-09 Beijing</h5>
</li>
<li class="hovereffect"><a href="https://www.wuming.ren" title="观赏该图片详细信息"><img src="/img/20240516_www_wuming_ren_7.jpg" alt="图片2" title="这里是图片标题" /></a>
<h5>By <a href="https://www.wuming.ren" title="访问武鸣人">武鸣人</a> 3-31-09 Beijing</h5>
</li>
<li class="hovereffect"><a href="https://www.wuming.ren" title="观赏该图片详细信息"><img src="/img/20240516_www_wuming_ren_8.jpg" alt="图片3" title="这里是图片标题" /></a>
<h5>By <a href="https://www.wuming.ren" title="访问武鸣人">武鸣人</a> 3-31-09 Beijing</h5>
</li>
<li class="hovereffect"><a href="https://www.wuming.ren" title="观赏该图片详细信息"><img src="/img/20240516_www_wuming_ren_9.jpg" alt="图片4" title="这里是图片标题" /></a>
<h5>By <a href="https://www.wuming.ren" title="访问武鸣人">武鸣人</a> 3-31-09 Beijing</h5>
</li>
<li class="hovereffect"><a href="https://www.wuming.ren" title="观赏该图片详细信息"><img src="/img/20240516_www_wuming_ren_10.jpg" alt="图片5" title="这里是图片标题" /></a>
<h5>By <a href="https://www.wuming.ren" title="访问武鸣人">武鸣人</a> 3-31-09 Beijing</h5>
</li>
<li class="hovereffect"><a href="https://www.wuming.ren" title="观赏该图片详细信息"><img src="/img/20240516_www_wuming_ren_11.jpg" alt="图片6" title="这里是图片标题" /></a>
<h5>By <a href="https://www.wuming.ren" title="访问武鸣人">武鸣人</a> 3-31-09 Beijing</h5>
</li>
</ul>
</div><!--/.www_wuming_ren-->
</body>
</html>本文来自武鸣人网站，转载请注明出处