自闭了
放大倍数是素材没做调整的原因，
学Java、搞算法搞自闭了，想着还有个小作业没写，就随手敲了个，
读中专是真的伤，尤其是在理论基础上，虽然事在人为，
绝知此事要躬行吧。
直接贴代码了，此博客评论会回(大概)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<title></title>
</head>
<body>
<div class="booth">
<div class="gallery">
<img width="400" src="img/img430x430.jpg"/>
<div class="img-lens"></div>
<div class="zoom"></div>
</div>
<script src="js/magnifier.js"></script>
</div>
</body>
</html>
magnifier.js
var gallery = document.getElementsByClassName("gallery")[0];
var lens = document.getElementsByClassName("img-lens")[0];
var zoom = document.getElementsByClassName("zoom")[0];
gallery.addEventListener("mousemove", function(){
var top = event.pageY - gallery.offsetTop - 30;
var left = event.pageX - gallery.offsetLeft - 30;
if(top > 0 && top < 302) {
lens.style.top = top + "px";
zoom.style.backgroundPositionY = -top * 2 + "px";
}
if(left > 0 && left < 302) {
lens.style.left = left + "px";
zoom.style.backgroundPositionX = -left * 2 + "px";
}
});
index.css
.booth {
width: 400px;
height: 400px;
padding: 9px;
border: 1px solid #F2F2F2;
}
.gallery {
position: relative;
}
.gallery:hover > .zoom {
border-top: 1px solid #F2F2F2;
border-bottom: 1px solid #F2F2F2;
background: url(../img/img800x800.jpg) no-repeat;
}
.gallery:hover > .img-lens {
background: url(../img/lens.png)repeat scroll 0 0 transparent;
}
.zoom {
-webkit-box-sizing: border-box;
overflow: inherit;
position: absolute;
top: -10px;
left: 415px;
width: 410px;
height: 420px;
}
.img-lens {
position: absolute;
width: 100px;
height: 100px;
}
.img-lens:hover {
cursor: move;
}
随手，勿喷
![nodejs微信开发---授权登录+获取用户信息微信网页授权[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)