2个回答
展开全部
这个不是很麻烦，我提供思路，这是我之前做过的一个例子要的跟你说的差不多，我用的是VS2008，所以Jquery用的是VS版本你可以更换Jquery版本，一样行
代码如下：
<!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>
<title></title>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<!--实现tooltip功能-->
<style type="text/css">
ul li
{
float: left;
}
</style>
<script type="text/javascript">
$(function() {
var x = 10;
var y = 20;
$('a.tooltip').mouseover(function(e) {
this.myTitle = this.title;
var imgTitle = this.myTitle ? "<br>" + this.myTitle : "";
var tooltip = "<div id='tooltip'> <img src='" + this.href + "' alt='产品预览图' />" + imgTitle + "</div>";
$("body").append(tooltip);
$('#tooltip').css({
"position": "absolute",
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px",
"background-color": "yellow"
}).show("fast");
$('#tooltip img').css({
"width": "200px",
"height": "180px"
});
})
.mouseout(function() {
$("#tooltip").remove();
}).mousemove(function(e) {
$('#tooltip').css({
"position": "absolute",
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px",
"background-color": "yellow"
}).show("fast");
$('#tooltip img').css({
"width": "200px",
"height": "180px"
});
});
});
</script>
</head>
<body>
<ul style="list-style-type: none; float: left; width: 230px;">
<li><a href="Images/5011.bmp" class="tooltip" title="图片1">
<img src="Images/5011.bmp" alt="图片1" /></a></li>
<li><a href="Images/5015.bmp" class="tooltip" title="图片2">
<img src="Images/5015.bmp" alt="图片2" /></a></li>
<li><a href="Images/5023.bmp" class="tooltip" title="图片3">
<img src="Images/5023.bmp" alt="图片3" /></a></li>
<li><a href="Images/5035.bmp" class="tooltip" title="图片4">
<img src="Images/5035.bmp" alt="图片4" /></a></li>
<li><a href="Images/5037.bmp" class="tooltip" title="图片5">
<img src="Images/5037.bmp" alt="图片5" /></a></li>
</ul>
</body>
</html>
代码如下：
<!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>
<title></title>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<!--实现tooltip功能-->
<style type="text/css">
ul li
{
float: left;
}
</style>
<script type="text/javascript">
$(function() {
var x = 10;
var y = 20;
$('a.tooltip').mouseover(function(e) {
this.myTitle = this.title;
var imgTitle = this.myTitle ? "<br>" + this.myTitle : "";
var tooltip = "<div id='tooltip'> <img src='" + this.href + "' alt='产品预览图' />" + imgTitle + "</div>";
$("body").append(tooltip);
$('#tooltip').css({
"position": "absolute",
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px",
"background-color": "yellow"
}).show("fast");
$('#tooltip img').css({
"width": "200px",
"height": "180px"
});
})
.mouseout(function() {
$("#tooltip").remove();
}).mousemove(function(e) {
$('#tooltip').css({
"position": "absolute",
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px",
"background-color": "yellow"
}).show("fast");
$('#tooltip img').css({
"width": "200px",
"height": "180px"
});
});
});
</script>
</head>
<body>
<ul style="list-style-type: none; float: left; width: 230px;">
<li><a href="Images/5011.bmp" class="tooltip" title="图片1">
<img src="Images/5011.bmp" alt="图片1" /></a></li>
<li><a href="Images/5015.bmp" class="tooltip" title="图片2">
<img src="Images/5015.bmp" alt="图片2" /></a></li>
<li><a href="Images/5023.bmp" class="tooltip" title="图片3">
<img src="Images/5023.bmp" alt="图片3" /></a></li>
<li><a href="Images/5035.bmp" class="tooltip" title="图片4">
<img src="Images/5035.bmp" alt="图片4" /></a></li>
<li><a href="Images/5037.bmp" class="tooltip" title="图片5">
<img src="Images/5037.bmp" alt="图片5" /></a></li>
</ul>
</body>
</html>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
