<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图片提示效果</title>
<script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery1.3.2.js"></script>
<style type="text/css">
body{margin:0 ;padding:40px;line-height:180%;}
img{border:none;} ul,li{margin:0 ;padding:0;}
li{list-style:none;display:inline; border:1px solid #999;float:left; margin-right:10px;}
/*tooltip*/
#tooltip{position:absolute;border:1px solid #CCC;display:none;color:#FFF; padding:2px; background:#333;}
</style>
<script type="text/javascript">
$(function(){
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e){
this.myTitle = this.title;
this.title = "";
var imgTitle = this.myTitle?" "+ this.myTitle : "";
var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"<\/div>";
//创建 div 元素
document.write(tooltip);
$("body").append(tooltip);
//把它追加到文档中
$("#tooltip").css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
}).fadeIn(600);
//设置x坐标和y坐标，并且显示
}).mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove(); //移除
}).mousemove(function(e){
$("#tooltip").css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
});
});
})
</script>
</head>
<body>
<h3>效果</h3>
<ul>
<li><a class="tooltip" title="苹果 iPod" href="http://files.jb51.net/file_images/article/201212/picmove_2/wall1.jpg"><img src="http://files.jb51.net/file_images/article/201212/picmove_2/wall_s1.jpg" alt="苹果 iPod"></a></li>
<li><a class="tooltip" title="苹果 iPod nano" href="http://files.jb51.net/file_images/article/201212/picmove_2/wall2.jpg"><img src="http://files.jb51.net/file_images/article/201212/picmove_2/wall_s2.jpg" alt="苹果 iPod nano"></a></li>
<li><a class="tooltip" title="苹果 iPone" href="http://files.jb51.net/file_images/article/201212/picmove_2/wall3.jpg"><img src="http://files.jb51.net/file_images/article/201212/picmove_2/wall_s3.jpg" alt="苹果 iPone"></a></li>
<li><a class="tooltip" title="苹果 Mac" href="http://files.jb51.net/file_images/article/201212/picmove_2/wall4.jpg"><img src="http://files.jb51.net/file_images/article/201212/picmove_2/wall_s4.jpg" alt="苹果 Mac"></a></li>
</ul>
</body>
</html>
![http://files.jb51.net/file_images/article/201212/picmove_2/wall1.jpg"><img](http://files.jb51.net/file_images/article/201212/picmove_2/wall1.jpg"><img){kind=link}
![http://files.jb51.net/file_images/article/201212/picmove_2/wall2.jpg"><img](http://files.jb51.net/file_images/article/201212/picmove_2/wall2.jpg"><img){kind=link}
![http://files.jb51.net/file_images/article/201212/picmove_2/wall3.jpg"><img](http://files.jb51.net/file_images/article/201212/picmove_2/wall3.jpg"><img){kind=link}
![http://files.jb51.net/file_images/article/201212/picmove_2/wall4.jpg"><img](http://files.jb51.net/file_images/article/201212/picmove_2/wall4.jpg"><img){kind=link}
