前端——js 天猫商品图放大镜效果、鼠标移动显示放大效果、（查看图片细节）

1.页面布局

定位一个正常的图片，上面放一个可被鼠标移动的半透明的色块，
在图片右侧隐藏一个更大的图片，
当半透明色块移动时显示右侧大图的对应部分

注：如果想在网页中查看源代码提取文件，提取不到大图，可以直接Ctrl+s保存网页全部内容

       <div id="left"><div id="box"></div></div><div id="right"><img id="bbox" src="../HTML/img/big.jpg"></img></div>

2.页面样式

为了让色块可以在图片中移动，需要给图片相对定位，色块绝对定位，便于给色块进行位置赋值
为了让大图根据色块进行位置变化，需要给右边外框相对定位，图片绝对定位
分别给左右框左浮动，保障放大图出现在正常图旁边

*{padding:0;margin: 0;}#left{width: 400px;height: 400px;border: 1px solid black;margin:20px;background-image: url(../HTML/img/small.jpg);background-size: 100% 100%;position: relative;float: left;}#box{width: 220px;height: 200px;background:white;/*透明度*/opacity: 0.4;/*方块要动所以给他一个定位*/position: absolute;}#right{width: 440px;height: 400px;border: 1px solid black;position: relative;float: left;margin:20px;overflow: hidden;}#bbox{position: absolute;left: 0;top: 0;}

3.给左侧图片加鼠标移动事件

1）鼠标移动函数

left.onmousemove=function(e){      }

2）获得兼容的事件对象（鼠标位置）
window.event：ie解析这个 e:谷歌，火狐解析这个

var move=window.event||e;

3）获得鼠标距离事件源的位置（需要先给事件源一个相对定位)
move.offsetX:IE浏览器上的获取方法,e.offsetX:非IE浏览器的获取方法

var move_left=move.offsetX||e.offsetX;
var move_top=move.offsetY||e.offsetY;

4）为了让鼠标在色块中心时色块开始正式移动,所以鼠标位置减去色块的一边才是色块距离边框的真实距离

var box_left=move_left-110;
var box_top=move_top-100;

5）将计算好的位置赋值给色块

box.style.left=box_left+"px";
box.style.top=box_top+"px";

4.色块在触碰过程中会抖动的原因

鼠标和事件源之间如果有其他元素存在,效果的触发就会有问题（图片作为事件源，色块影响了效果）
所以要避免鼠标与事件源有其他元素,可以在色块和图片上在加一个盒子,让鼠标在盒子上移动

<div id="new"></div>

调整盒子的位置，保证盒子透明

#new{width: 400px;height: 400px;background: blue;position: absolute;top: 0;left: 0;/*背景设置成透明*/opacity: 0;/*鼠标变成十字*/cursor: crosshair;}

5.保证色块不超出表框

所以当计算好色块的距离小于0时,不再让色块在移动而是等于0
判断结束后再进行赋值

if(box_left<0){box_left=0;}if(box_top<0){box_top=0;}if(box_left>180){box_left=180;}if(box_top>200){box_top=200;}

6.控制右侧显示大图

右侧整个大图片800x800
1）根据对应色块移动，大图在框内的显示位置可得到关系式

var bbox_left=box_left*-2;
var bbox_top=box_top*-2;

2）将计算的值赋值

bbox.style.left=bbox_left+"px";
bbox.style.top=bbox_top+"px";

7.当鼠标移入移出色块

1）鼠标未移入前色块，右侧大图不显示

#box,#right{display: none;           }

2）鼠标移入事件，色块显示 ,右侧大图显示

newleft.onmouseover=function(){box.style.display="block";right.style.display="block";}

3）鼠标移出事件色块显示 ,右侧大图消失

newleft.onmouseout=function(){box.style.display="none";right.style.display="none";}

8.源代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>*{padding:0;margin: 0;}#left{width: 400px;height: 400px;border: 1px solid black;margin:20px;background-image: url(../HTML/img/small.jpg);background-size: 100% 100%;position: relative;float: left;}#box{width: 220px;height: 200px;background:white;/*透明度*/opacity: 0.4;/*方块要动所以给他一个定位*/position: absolute;}#right{width: 440px;height: 400px;border: 1px solid black;position: relative;float: left;margin:20px;overflow: hidden;}#bbox{position: absolute;left: 0;top: 0;}#new{width: 400px;height: 400px;background: blue;position: absolute;top: 0;left: 0;/*背景设置成透明*/opacity: 0;/*鼠标变成十字*/cursor: crosshair;}#box,#right{display: none;}</style></head><body><div id="left"><div id="box"></div><div id="new"></div></div><div id="right"><img id="bbox" src="../HTML/img/big.jpg"></img></div><script>var left=document.getElementById("left");var box=document.getElementById("box");var right=document.getElementById("right");var bbox=document.getElementById("bbox");var newleft=document.getElementById("new");//          给左侧小图加鼠标移动事件newleft.onmousemove=function(e){
//              鼠标移动函数var move=window.event||e;
//              获得兼容的事件对象var move_left=move.offsetX||e.offsetX;
//              获得鼠标距离事件源的位置var move_top=move.offsetY||e.offsetY;//              为了让鼠标在色块中心时色块开始正式移动,所以鼠标位置减去色块的一边才是色块距离边框的真实距离var box_left=move_left-110;var box_top=move_top-100;当计算好的距离小于0时,不再让色块在移动而是等于0if(box_left<0){box_left=0;}if(box_top<0){box_top=0;}if(box_left>180){box_left=180;}if(box_top>200){box_top=200;}//              将计算好的位置赋值给色块box.style.left=box_left+"px";box.style.top=box_top+"px";var bbox_left=box_left*-2;var bbox_top=box_top*-2;
//           将计算的值赋值bbox.style.left=bbox_left+"px";bbox.style.top=bbox_top+"px";}
//          鼠标移入事件newleft.onmouseover=function(){box.style.display="block";right.style.display="block";}
//          鼠标移出事件newleft.onmouseout=function(){box.style.display="none";right.style.display="none";}</script></body>
</html>

9.效果