<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-2.1.1.min.js" ></script>
</head>
<script type="text/javascript">
$(function(){
var x=10;
var y=-20;
$("a.tooltip").mouseover(function(e){ //当鼠标指针位于元素上方时，会发生 mouseover 事件。
this.mutitle=this.title; //获取当前的元素的title
this.title="";
var imgtitle=this.mutitle?"<br/>"+this.title:"";
var tooltip="<div id='tooltip'><img src='"+this.href+"' alt='预览效果 '/>"+imgtitle+"</div>";
$('body').append(tooltip); //追加文档
$("#tooltip").css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
}).show('fast'); //设置坐标 x和y，显示
}).mouseout(function(){ //鼠标移开时候
this.title=this.mutitle;
$('#tooltip').remove(); //删除这个id
}).mousemove(function(e){ //当鼠标指针在指定的元素中移动时
$('#tooltip').css({ //显示的位置
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
});
});
})
//图片放大
/*
* 鼠标移动元素时
* 创建一个div元素 并且附带着放大的图片效果
*追加当当前文档当中
* 设置 图片的位置 并显示show（‘fast’）快
*
* 鼠标离开的时候 删除创建的id
*
* 当鼠标移动时候 速则设置放大图片的位置
* */
</script>
<style>
img
{
}
</style>
<body>
<ul>
<li><a href="2.jpg" title="mac " class="tooltip" ><img src="2.jpg" alt="mac" /></a></li>
</ul>
</body>
</html>
