jquery系列---实现图片提示功能
例如：实现如下的效果，当鼠标放在图片上时，会出现及时的提示效果具体代码如下：<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="../临时文档/jquery1.4.2.js" ></script>
<title>无标题文档</title>
<style type="text/css">
#tooltip {
position:absolute;
border:1px solid #c3c;
background-color:#ccc;
padding:2px 10px;
}
#imgtest1 {
position:absolute;
width:401px;
height:382px;
padding:20px 30px;
background:url(img/bg.png) no-repeat;
}
</style>
<script type="text/javascript">
$(function(){
$('#tooltip1').mouseover(function(e){
this.mytitle = this.title;
this.title = "";
var tooltip = "<div id='tooltip'>"+this.mytitle+"</div>";
$('body').append(tooltip);
$('#tooltip').css({
"top":(e.pageY+20)+"px",
"left":(e.pageX+20)+"px"
}).show('fast');
});
$('#tooltip1').mouseout(function(){
this.title = this.mytitle;
$('#tooltip').remove();
});
$('#tooltip1').mousemove(function(e){
$('#tooltip')
.css({
"top":(e.pageY+20)+"px",
"left":(e.pageX+20)+"px"
});
});
$("#imgtest").mouseover(function(e){
this.mytitle = this.title;
this.title = "";
var imgtile = this.mytitle?"<br/>"+this.mytitle:"";
var imgtest = "<div id='imgtest1'><img src='"+this.src+"' alt='图片预览'/>"+imgtile+"</div>";
$("body").append(imgtest);
$("#imgtest1").css({
"top":(e.pageY+20)+"px",
"left":(e.pageX+20)+"px"
}).show("fast");
});
$("#imgtest").mouseout(function(){
this.title = this.mytitle;
$("#imgtest1").remove();
});
$('#imgtest').mousemove(function(e){
$('#imgtest1')
.css({
"top":(e.pageY+20)+"px",
"left":(e.pageX+20)+"px"
});
});
})
</script>
</head>
<body>
<p><a href="#" id="tooltip1" title="提示">显示更多商品11</a></p>
<p><a href="#" title="提示">显示更多商品333</a></p>
<p><img src="img/baidu.gif" alt="图片" width="200px" height="100px" id="imgtest" title="baidu"/></p>
</body>
</html>
