高分求JS代码(jquery实现也可以),效果如下图
当鼠标放到图片上(mouseover)时候弹出说明层,离开(mouseout)隐藏弹出层.类似百度贴吧里面网友回复帖子左边鼠标滑过网友头像的效果;和QQ空间鼠标滑过好友小...
当鼠标放到图片上(mouseover)时候弹出说明层,离开(mouseout)隐藏弹出层. 类似百度贴吧里面网友回复帖子左边鼠标滑过网友头像的效果;和QQ空间鼠标滑过好友小头像显示相信信息一样的效果。
展开
展开全部
<!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中的替换效果就可以。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询