使用jQuery制作产品放大镜效果实现效果：
使用jQuery制作产品放大镜效果实现原理：
通过设置图像的 CSS 属性（ left 和 top ），来实现图像的移动。
使用jQuery制作产品放大镜效果实现思路：
（1）div+css布局，制作小图、放大镜和大图的布局。
（2）放大镜和大图，默认隐藏，鼠标移动到小图上时，显示放大镜和大图。
（3）鼠标在小图上移动时，控制放大镜和大图，同时进行移动
使用jQuery制作制作产品放大镜效果需要掌握的知识点：
（1）基础div+css布局
（2）jquery 基础事件的使用：mouseenter 、mouseleave 、mousemove
（3）获取鼠标元素的位置：event.pageX 属性 和event.pageY 属性
（4）获取匹配元素在当前视口的相对偏移：offset() 方法的使用
使用jQuery制作制作产品放大镜效果实现步骤：
第一步：制作网页内容（小图、放大镜、大图）
<body><div id="fdj"><div id="small"><!-- 这里用来放小图片 --><img src="img/big.jpg" /><div id="mark"></div><!-- 这个用来作为放大镜 --></div><div id="big"><!-- 这里用来放大图片 --><img src="img/big.jpg" /></div></div></body>
第二步，添加 CSS样式
<style type="text/css">*{margin: 0; padding: 0;}#fdj {width: 800px;background-color: pink;margin: 20px auto;overflow: hidden; /* 清除里面small和big两个div浮动，带来的浮动塌陷 */}#small {position: relative;width: 250px;height: 250px;border: 1px solid red;float: left;}#small img {width: 100%;height: 100%;}#big {position: relative;width: 500px;/* 注意,大图的尺寸和小图的宽高,成比例放大 */height: 500px;border: 1px solid black;float: left;margin-left: 10px;display: none;/* 设置大图所在的div,默认隐藏 */overflow: hidden;/* 设置图片溢出部分，隐藏 */}#big img {position: absolute;}#mark {background-color: yellow;opacity: 0.5;width: 50px;height: 50px;position: absolute;display: none;/* 设置遮罩层默认隐藏 */}</style>
第三步：引入jQuery文件
<script src="js/jquery-3.4.1.min.js"></script><!--引入jquery-->
第四步：写jquery代码
<script>$(document).ready(function() {$("#small").mouseenter(function() { //鼠标移到small上，控制小div显示$("#mark").show();$("#big").show();});$("#small").mouseleave(function() {$("#mark").hide() //鼠标移出small时，控制小div隐藏$("#big").hide();});$("#small").mousemove(function(event){ //鼠标在samll上移动时，控制遮罩层小div移动，同时控制大图移动//获取遮罩层，mark的位置var markLeft = event.pageX-$(this).offset().left-25; //数字25是遮罩层宽度的一半,实现鼠标居中var markTop = event.pageY-$(this).offset().top-25;//设置不要超出边界if(markLeft<=0){markLeft = 0;}if(markLeft>=200){//200数字的来源：samll的宽度-遮罩层的宽度markLeft = 200;}if(markTop<=0){markTop = 0;}if(markTop>=200){//200数字的来源：samll的高度-遮罩层的高度markTop = 200;}//改变遮罩层的位置$("#mark").css({left:markLeft,top:markTop})//改变放大图片的位置$("#big img").css({//注意，大图的移动方向，和遮罩层的移动方向是相反的left: -2 * markLeft,top: -2 * markTop})})})</script>
代码说明：
event.pageX 属性：返回鼠标指针的位置，相对于文档的左边缘。
offset() 方法：返回或设置匹配元素相对于文档的偏移（位置）。该方法返回第一个匹配元素的偏移坐标。该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。
案例扩展效果：
=====这里是结束分割线======
