效果图
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="small">
<img src="images/dog.jpg" alt="">
<span class="grayBox"></span>
</div>
<div class="big">
<img src="images/dog.jpg" alt="">
</div>
</body>
</html>
CSS部分：
*{
margin: 0;
padding: 0;
}
.small {
width: 400px;
height: 400px;
position: relative;
margin-left: 200px;
margin-top: 100px;
border:4px solid #ddd;
box-shadow: 0 0 5px rgba(0,0,0,.5);
}
.small img{
width: 100%;
height: 100%;
}
.small .wrap{
width: 100%;
height: 100%;
position: absolute;
z-index: 999;
}
.small .grayBox{
display: none;
width: 100px;
height: 100px;
background-image: url(../images/dog.jpg);
background-size:400px 400px;
background-position: 0 0;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
position: absolute;
left: 0;
top: 0;
}
.big{
width: 400px;
height: 400px;
position: absolute;
left: 700px;
top: 100px;
border:1px solid #f10;
display: none;
overflow: hidden;
}
.big img{
position: absolute;
}
JS部分：
class Magnifier{
constructor(options){
this.options = options;
}
init(){
/*
small_box_ele : 小盒子
small_img_ele : 小图片
cutting_box_ele: 显示一部分的盒子
big_box_ele : 放大后的盒子
big_img_ele : 放大后的图片
*/
for(var attr in this.options){
this[attr + "_ele"] = this.$(this.options[attr]);
}
this.small_box_offset = {
left : this.small_box_ele.offsetLeft,
top : this.small_box_ele.offsetTop,
width : this.small_box_ele.offsetWidth,
height: this.small_box_ele.offsetHeight
}
this.cutting_box_offset = {
width: parseInt(getComputedStyle(this.cutting_box_ele).width),
height: parseInt(getComputedStyle(this.cutting_box_ele).height)
}
this.bindEvent();
}
$(selector){
return document.querySelector(selector);
}
bindEvent(){
this.small_box_ele.addEventListener("mouseover", function(){
this.showOrHidden("show");
}.bind(this));
this.small_box_ele.addEventListener("mouseout", function(){
this.showOrHidden("hidden");
}.bind(this));
this.small_box_ele.addEventListener("mousemove", function(evt){
var e = evt || event;
var x = e.clientX;
var y = e.clientY;
var res = this.factoryPos(x, y);
this.eleMove(res.x, res.y);
}.bind(this));
this.small_box_ele.addEventListener("wheelhander", function(evt){
console.log("滚动");
})
}
showOrHidden(type){
// cutt和大图的显示隐藏
// this.cutting_box_ele.style.display = type === "show" ? "block" : "none";
// this.big_box_ele.style.display = type === "show" ? "block" : "none";
if(type === "show"){
this.cutting_box_ele.style.display = "block";
this.big_box_ele.style.display = "block";
// 小图的透明图调整
this.small_img_ele.style.opacity = "0.5";
} else {
this.cutting_box_ele.style.display = "none";
this.big_box_ele.style.display = "none";
// 小图的透明图调整
this.small_img_ele.style.opacity = "1";
}
}
eleMove(x, y){
this.cutting_box_ele.style.left = x + "px";
this.cutting_box_ele.style.top = y + "px";
// cutting_box_ele的背景移动
this.cutting_box_ele.style.backgroundPosition = -x + "px " + -y + "px" ;
// 放大后图片的移动
this.big_img_ele.style.left = -x * (400 / 300) + "px";
this.big_img_ele.style.top = -y * (400 / 300) + "px";
}
factoryPos(x, y){
var _left = x - this.small_box_offset.left - this.cutting_box_offset.width / 2;
var _top = y - this.small_box_offset.top - this.cutting_box_offset.height / 2;
// 边界检测
_left = _left <= 0 ? 0 : _left;
_top = _top <= 0 ? 0 : _top;
var left_max = this.small_box_offset.width - this.cutting_box_offset.width - 8;
var top_max = this.small_box_offset.height - this.cutting_box_offset.height - 8;
_left = _left >= left_max ? left_max : _left;
_top = _top >= top_max ? top_max : _top;
return {
x: _left,
y: _top
}
}
}
new Magnifier({
small_box : ".small",
small_img : ".small img",
cutting_box : ".grayBox",
big_box : ".big",
big_img : ".big img"
}).init();
网友评论