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>
