效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/099af9a001c1d67aca68a9fc7c9633ac.gif)
BUG
- 受窗口移动影响(鼠标定位的时候)解决想法是在加上滚轮移动距离的变量 目前还没成功(。)
- 只能接受一个比例大小的图
代码
<div class="bigimg" id="small-box">
<img src="img/1.jpg" alt="" width="400" height="200" id="big-img">
<div class="tool" id="tool"></div>
</div>
<div class="big-glass" id="big-glass">
<img src="img/1.jpg" width="800" height="500" alt="" id="big-pic">
</div>
.bigimg {
display: inline-block;
position: relative;
height: 200px;
width: 400px;
background: #e5e5e5;
}
.bigimg img {
position: absolute;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
}
.big-glass {
position: absolute;
overflow: hidden;
float: left;
top: 50px;
left: 500px;
height: 200px;
width: 200px;
display: none;
z-index: 999;
}
.big-glass.active {
display: block;
}
.big-glass img {
height: 200%;
position: absolute;
top: 0;
left: 0;
}
.tool {
position: absolute;
top: 0;
left: 0;
height: 100px;
width: 100px;
background: #e5e5e5;
opacity: 0.6;
filter: alpha(opacity=60);
display: none;
}
.tool.active {
display: block;
}
var smallBox = byId("small-box");
var bigBox = byId("big-glass");
var tool = byId("tool");
smallBox.onmouseenter = function(){
tool.className = "tool active";
bigBox.className = "big-glass active";
}
smallBox.onmouseleave = function(){
tool.className = "tool";
bigBox.className = "big-glass";
}
smallBox.onmousemove = function(e){
var _e = window.event||e;
var x = _e.clientX - this.offsetLeft - tool.offsetWidth/2;
var y = _e.clientY - this.offsetTop - tool.offsetHeight/2;
if(x < 0){
x = 0;
}
if(y < 0){
y = 0;
}
if(x>this.offsetWidth-tool.offsetWidth){
x = this.offsetWidth-tool.offsetWidth;
}
if(y>this.offsetHeight-tool.offsetHeight){
y = this.offsetHeight-tool.offsetHeight;
}
tool.style.left = x + "px";
tool.style.top = y + "px" ;
bigPic.style.left = -x*2 + "px";
bigPic.style.top = -y*2 + "px";
}
要点
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ec7c9f98d45656d8fc6188bcc3b11410.jpeg)