需求说明：
使用 jQuery 操作页面元素的方法，实现浏览大图片的效果，在页面上插入一幅小图片，当鼠标悬停到小图片上时，在小图片的右侧出现与之相对应的大图片
实现思路：
在 HTML 页面中添加 <img /> 标签，显示小图片
添加 <img id="big_img" /> 标签，用于显示放大的图片
在页面加载完毕事件中，获取 id 为 small_img 的 <img/> 标签对象，给图片的鼠标悬停事件绑定方法，实在鼠标指针附近显示放大后的图片
在页面加载完毕事件中，获取 id 为 small_img 的 <img/> 标签对象，给图片的鼠标移开事件绑定方法，实现隐藏放大的图片
实现代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ var x = 5,y= 15; $("#small_img").mousemove(function(e){ console.log(e); $("#big_img").attr("src",this.src); $("#big_img").css({ "top":e.pageY+y+"px", "left":e.pageX+x+"px", "position":"absolute"}); $("#big_img").show(); }); $("#small_img").mouseout(function(e){ $("#big_img").hide(); }); }); </script> </head> <body> <img src="img/img_4.jpg" width="100" height="50" id="small_img"/> <img id="big_img"/> </body> </html>
