商城放大镜效果

要实现放大镜效果，我们首先要有一个大体的效果图，如上图所示，下面是思路分析：

1. 页面加载完后就获取所要操作的节点对象（smallBox、tool、bigBox、bigImg等）
2. 当鼠标浮动到小盒子上时，显示输出放大镜（tool）,显示出右边的大盒子。
3. 在鼠标在小盒子上移动时，放大镜（tool）跟着鼠标移动（范围就是小盒子内）。右边的大盒子中的大图片也随之移动。

效果分析图
右部显示出来是放大的效果，那么右部的容器和小工具的大小比求出图片需要放大多少倍。其实这个原理就是小工具在左侧的小盒子上移动，然后图片按比例放大后显示在右侧的盒子上，（图片大盒子小，显示不完全）然后移动小工具，让右侧大图片在右侧盒子内移动，所以小工具的宽高比如为100100，那么右侧大盒子的宽高需按照比例来，可以设置为400400，那么左侧的原始图片假如宽度为300，高度可以不用考虑，在右侧需要把这个张图片宽度设置为300*4=1200的宽度。这些在css中设置好，接下来要求的就是图片怎么移动，上图左侧有一个div，div里面有一个小工具（黄色背景，移动用的），右侧有一个div（黄色背景），绿色背景为放大后的图片。a代表小工具的宽度（offsetWidth），a1代表右侧div的宽度，c代表小工具在左侧div移动的距离，那么c1就是我们要求的值，记住，是让右侧的大图片在盒子内移动，而不是移动盒子。

代码html

<!--小盒子-->
<div id="smallBox" class="smallBox">
<div id="tool" class="tool"></div>
<img src="awe.jpg" />
</div>
<!--大盒子-->
<div id="bigBox" class="bigBox">
<img id="bigImg" src="awe.jpg" />
</div>

代码css

.smallBox{
border:1px solid #ccc;
width:300px;
position:absolute;
top:100px;
left:100px;
cursor:move;
overflow:hidden;
 
}
.tool{
display:none;
width:100px;
height:100px;
background-color:gold;
filter:alpha(opacity=50);
opacity:0.5;
position:absolute;
}
.smallBox img{
width:300px;
}
.bigBox{
display:none;
width:400px;
height:400px;
overflow:hidden;
position:absolute;
left:500px;
top:100px;
border:1px solid #ccc;
}
.bigBox img{
position:absolute;
width:1200px;
}

代码js

window.onload = function(){
var smallBox = document.getElementById("smallBox");  //小盒子
var tool = document.getElementById("tool");  //放大镜
var bigBox = document.getElementById("bigBox");  //大盒子
var bigImg = document.getElementById("bigImg");  //大图片
 
//第二步：当鼠标浮动到小盒子上时，显示出放大镜（tool）,显示出右边的大盒子。
smallBox.onmouseover = function(){
tool.style.display = "block";  //显示出放大镜（tool）
bigBox.style.display = "block"; //显示出右边的大盒子。
}
smallBox.onmouseout = function(){
tool.style.display = "none";  //隐藏出放大镜（tool）
bigBox.style.display = "none"; //隐藏出右边的大盒子。
}
//第三步：在小盒子上移动鼠标时，放大镜（tool）跟着鼠标移动（范围就是小盒子内）。右边的大盒子中的大图片也随之移动
//offsetWidth  offsetHeight   获取一个节点对象的宽度和高度（不包括滚动条）
smallBox.onmousemove = function(e){
var _event = window.event||e; //事件对象
//计算放大镜（tool）的x坐标
var left = _event.clientX-smallBox.offsetLeft-tool.offsetWidth/2;
//计算放大镜（tool）的y坐标
var top = _event.clientY-smallBox.offsetTop-tool.offsetHeight/2;
//处理left和top值(限制范围)
if(left<0){
left = 0;
}
if(top<0){
top = 0;
}
if(left>smallBox.offsetWidth-tool.offsetWidth){
left = smallBox.offsetWidth-tool.offsetWidth;
}
if(top>smallBox.offsetHeight-tool.offsetHeight){
top = smallBox.offsetHeight-tool.offsetHeight;
}
//改变放大镜的一个坐标
tool.style.left = left + "px";
tool.style.top = top + "px";
//求图片应当移动的距离
var x = tool.offsetLeft*bigBox.offsetWidth/tool.offsetWidth;
var y = tool.offsetTop*bigBox.offsetHeight/tool.offsetHeight;
//改变图片移动的距离
bigImg.style.left = -x + "px";
bigImg.style.top = -y + "px";
}
}
这个逻辑部分使用的完全是纯js，下面给出使用jquery的代码，更简洁：
jQuery：
$(function(){
$("#smallBox").on({
mouseenter:function(){
$("#tool").css({display:"block"});
$("#bigBox").css({display:"block"});
},
mouseleave:function(){
$("#tool").css({display:"none"});
$("#bigBox").css({display:"none"})
},
mousemove:function(e){
var cX = e.clientX-$("#smallBox").offset().left-$("#tool").width()/2;
var cY = e.clientY-$("#smallBox").offset().top-$("#tool").height()/2;
if(cX<0){
cX = 0;
}
if(cX>$("#smallBox").width()-$("#tool").width()){
cX = $("#smallBox").width()-$("#tool").width();
}
if(cY<0){
cY = 0;
}
if(cY>$("#smallBox").height()-$("#tool").height()){
cY = $("#smallBox").height()-$("#tool").height();
}
 
$("#tool").css({
left:cX,
top:cY
});
var x = $("#tool").position().left*$("#bigBox").width()/$("#tool").width();
var y =$("#tool").position().top*$("#bigBox").height()/$("#tool").height();
$("#bigImg").css({
left:-x,
top:-y
})
 
}
})
})

在实际情况下还会有一个屏幕滚动的高度，我们需要改装这一句，加上$(window).scrollTop()屏幕滚动的高度（jq的写法）

var cY = e.clientY-$(".bigxiao").offset().top-$("#tools").height()/2 +$(window).scrollTop();

转载自：https://blog.csdn.net/susuzhe123/article/details/60571004