单击图片选择主图，鼠标悬浮在图片上，可以对图片进行区域放大。
效果图如下：
代码实现如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放大图片</title>
<style>
body>div{
margin: 0 auto;
width: 600px;
}
.datu img{
width: 100%;
height: 100%;
}
.datu{
width: 505px;
height: 350px;
position: relative;
left:-100px;
}
#move{
background-color:lightblue;
opacity: 0.5;
width: 150px;
height: 150px;
position: absolute;
left:0px;
top:0px;
}
#bimg{
width: 400px;
height: 400px;
overflow: hidden;
position: absolute;
top:0px;
left:510px;
/* display: none;*/
}
#bimg img{
width: 1610px;
height: 1000px;
position: absolute;
top:0px;
left: 0px;
}
.xiaotu{
width: 500px;
height: 120px;
position: relative;
left:-100px;
}
.img1,.img2,.img3,.img4{
width: 25%;
float: left;
}
.img1 img,.img2 img,.img3 img,.img4 img{
width: 130px;
height: 100px;
}
</style>
</head>
<body>
<div>
<div class="datu">
<img src="0726/12.jpg" class="d1">
<div id="move"></div>
<div id="bimg">
<img src="0726/12.jpg" id="bbimg">
</div>
</div>
<div class="xiaotu">
<div class="img1"><img src="0726/12.jpg" class="i1"></div>
<div class="img2"><img src="0726/11.jpg" class="i2"></div>
<div class="img3"><img src="0726/17.jpg" class="i3"></div>
<div class="img4"><img src="0726/18.jpg" class="i4"></div>
</div>
</div>
<script>
var i1=document.getElementsByClassName("i1")[0];
var i2=document.getElementsByClassName("i2")[0];
var i3=document.getElementsByClassName("i3")[0];
var i4=document.getElementsByClassName("i4")[0];
var d1=document.getElementsByClassName("d1")[0];
var box=document.getElementsByClassName("datu")[0];
var move=document.getElementById("move");
var bimg=document.getElementById("bimg");
var bbimg=document.getElementById("bbimg");
box.onmouseover=function(){
bimg.style.display="block";
move.style.display="block";
}
box.onmouseout=function(){
bimg.style.display="none";
move.style.display="none";
}
box.onmousemove=function(event){
var x=event.clientX;
var y=event.clientY;
var t=box.offsetTop;
var l=box.offsetLeft;
var left1=x-l-move.offsetWidth/2;
var top1=y-t-move.offsetHeight/2;
if(top1<=0){
top1=0;//到最上边
}
else if(top1>=box.offsetHeight-move.offsetHeight){
top1=box.offsetHeight-move.offsetHeight;
}
if(left1<=0){
left1=0;
}
else if(left1>=box.offsetWidth-move.offsetWidth){
left1=box.offsetWidth-move.offsetWidth;
}
move.style.top=top1+"px";
move.style.left=left1+"px";
var w=left1/(box.offsetWidth-move.offsetWidth);
var h=top1/(box.offsetHeight-move.offsetHeight);
var bbimgtop=(bbimg.offsetHeight-bimg.offsetHeight)*h;
var bbimgleft=(bbimg.offsetWidth-bimg.offsetWidth)*w;
bbimg.style.top=-bbimgtop+"px";
bbimg.style.left=-bbimgleft+"px";
}
i1.onclick=function(){
d1.src=i1.src;
bbimg.src=i1.src;
}
i2.onclick=function(){
d1.src=i2.src;
bbimg.src=i2.src;
}
i3.onclick=function(){
d1.src=i3.src;
bbimg.src=i3.src;
}
i4.onclick=function(){
d1.src=i4.src;
bbimg.src=i4.src;
}
</script>
</body>
</html>