高分求JS代码（jquery实现也可以），效果如下图
当鼠标放到图片上（mouseover）时候弹出说明层，离开（mouseout）隐藏弹出层.类似百度贴吧里面网友回复帖子左边鼠标滑过网友头像的效果；和QQ空间鼠标滑过好友小...
当鼠标放到图片上（mouseover）时候弹出说明层，离开（mouseout）隐藏弹出层. 类似百度贴吧里面网友回复帖子左边鼠标滑过网友头像的效果；和QQ空间鼠标滑过好友小头像显示相信信息一样的效果。
展开
3个回答
展开全部
<!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" />
<title>无标题文档</title>
<script src="js/jquery-1.4.4.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#imginfo").hide();
$("img").hover(
function(){
var $this = $(this);
var img = $this.next().text();
var offset = $this.offset();
var infoleft = offset.left + $this.width() + 10;
var infotop = offset.top
$("#imginfo").find(".infotitle span").html(img).end().css({"position":"absolute","top":infotop,"left":infoleft}).show();
},
function(){
$("#imginfo").hide();
}
);
});
</script>
</head>
<body>
<ul>
<li><img src="images/1_s.jpg" /><div>图片1</div></li>
<li><img src="images/2_s.jpg" /><div>图片2</div></li>
<li><img src="images/3_s.jpg" /><div>图片3</div></li>
<li><img src="images/4_s.jpg" /><div>图片4</div></li>
</ul>
<div id="imginfo">
<div class="infotitle"><span></span>信息说明</div>
<div class="infocontent">次要信息</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="js/jquery-1.4.4.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#imginfo").hide();
$("img").hover(
function(){
var $this = $(this);
var img = $this.next().text();
var offset = $this.offset();
var infoleft = offset.left + $this.width() + 10;
var infotop = offset.top
$("#imginfo").find(".infotitle span").html(img).end().css({"position":"absolute","top":infotop,"left":infoleft}).show();
},
function(){
$("#imginfo").hide();
}
);
});
</script>
</head>
<body>
<ul>
<li><img src="images/1_s.jpg" /><div>图片1</div></li>
<li><img src="images/2_s.jpg" /><div>图片2</div></li>
<li><img src="images/3_s.jpg" /><div>图片3</div></li>
<li><img src="images/4_s.jpg" /><div>图片4</div></li>
</ul>
<div id="imginfo">
<div class="infotitle"><span></span>信息说明</div>
<div class="infocontent">次要信息</div>
</div>
</body>
</html>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
是不是这种，这个比你那个更先进哦，可以随鼠标移动。如果要就给个邮箱，发你邮箱里。
追问
不是的，你那是鼠标滑过小图时候，弹出一个大图，大图还随着鼠标在小图上滑动而滑动对吧。这个我自己都会写，谢谢啦。！
追答
晕 你这个都会写 上面那个不会写？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
dreamweaver中的替换效果就可以。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
