这里是一个在PC端电商页面经常用到的一种功能，它可以使消费者在查看页面的商品时看的更加清晰。也就是俗称的放大镜
这里需要用到一些知识，鼠标事件（mousemove，mouseenter，mouseleave），定位等事件。
这里的html布局是在页面上有一个div，内部放一张图片，和一个小滑块（小div），另一个位置放另一个div，内部放一张和上面相同的图片，这个图片要求是比上一张大。
<div class="small"> <img src="15/img/big.jpg"/> <div class="slider"> </div> </div> <div class="big"> <img src="15/img/big.jpg"/> </div>
在css方面，这些div和图片的位置都是定位的。
有一些刚开始是隐藏的，当触发一些鼠标事件的时候，才显示
*{margin: 0;padding: 0;} .small{width: 500px;height: 500px;position: absolute;left: 100px;} .small>img{width: 100%;} .big{width: 500px;height: 500px;position: absolute;left: 600px;top: 100px;overflow: hidden;display: none;} .small>img{width: 500px;height: 500px;} .slider{width: 50px;height: 50px;position: absolute;background-color: rgba(255,0,0,0.3);display: none;}
有关JQuery，更多的是一些关于位置的问题
这里我百度了一下关于位置的方法
clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。 screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。$('.small').mousemove(function (event) { var x = event.clientX -$('.small').offset().left - $('.slider').width()/2; var y = event.clientY - $('.small').offset().top - $('.slider').height()/2; var minX = 0;
var maxX = $(".small").width()-$(".slider").width(); var minY = 0;
var maxY = $(".small").height()-$(".slider").height(); if (minX>x) { x=minX; }; if (maxX<x) { x = maxX; }; if (minY>y) { y=minY; }; if (maxY<y) { y = maxY; }; $(".slider").css({ left:x, top:y });
var bigX = -x/maxX*($(".big>img").width()-$(".big").innerWidth())+"px" var bigY = -y/maxY*($(".big>img").height()-$(".big").innerHeight())+"px" $(".big img").css({ position: "absolute", left: bigX, top: bigY }) }) $(".small").mouseenter(function () { $(".big").css("display","block"); $(".slider").css("display","block"); }) $(".small").mouseleave(function () { $(".big").css("display","none"); $(".slider").css("display","none"); })
这个是关于JQuery的代码。
转载于:https://www.cnblogs.com/qizhichao/p/6007873.html
相关资源：react仿淘宝图片放大镜效果