<!DOCTYPE html>
<html>
<head>
<title>test.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
var $div="<div id='div1'><img style='border-radius:25px;' width='450px' height='450px' ></div>";
$("a").mouseover(function(event){ //鼠標移入
$("body").append($div);//追加到網頁中
$("#div1 img").attr("src",$(this).attr("title"));//設置顯示圖片的img標簽的src路徑
});
$("a").mouseout(function(){//鼠標移出
$("#div1").remove();//刪除div
});
$("a").mousemove(function(event){//鼠標移動 event是事件對象 ,event.clientX 獲得鼠標當前的X軸坐標,event.clientY 獲得鼠標當前的Y軸坐標
var x=event.clientX+20;
var y=event.clientY+20;
$("#div1").css({position:"absolute",left:x,top:y});//設置div絕對定位 坐標就是距離鼠標當前的位置
});
});
</script>
<style type="text/css">
li{
list-style: none;
float: left;
margin: 5px;
}
</style>
</head>
<!--實現鼠標移入 顯示圖片的大圖, 跟隨鼠標坐標移動 -->
<body>
<ul>
<li><a title="img/1.jpg"><img width="300px" height="200px" src="img/1.jpg"></a></li>
<li><a title="img/2.png"><img width="300px" height="200px" src="img/2.png"></a></li>
<li><a title="img/3.jpg"><img width="300px" height="200px" src="img/3.jpg"></a></li>
</ul>
</body>
</html>
