<!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>