- 技术
- 眼睛会了，手也会了之JS原生放大镜效果
实现照片放大镜
页面样式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>哈哈
</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 350px;
height: 350px;
margin: 100px;
border: 1px solid #ccc;
position: relative;
}
.big {
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 360px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
.mask {
width: 175px;
height: 175px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0px;
left: 0px;
cursor: move;
display: none;
}
.small {
position: relative;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="small">
<img src="images/small.png" width="350" alt="" />
<div class="mask"></div>
</div>
<div class="big">
<img src="images/big.jpg" width="800" alt="" />
</div>
</div>
<script src="common.js"></script>
</body>
</html>
脚本文件
function my$(id
) {
return document
.getElementById(id
);
}
var box
= my$("box");
var small
= box
.children
[0];
var mask
= small
.children
[1];
var big
= box
.children
[1];
var bigImg
= big
.children
[0];
small
.onmouseover = function () {
mask
.style
.display
= 'block'
big
.style
.display
= 'block'
}
small
.onmousemove = function (e
) {
var x
= e
.clientX
- 100 - mask
.offsetWidth
/ 2
var y
= e
.clientY
- 100 - mask
.offsetHeight
/ 2
x
= x
<= 0 ? 0 : x
y
= y
<= 0 ? 0 : y
x
= x
>= small
.offsetWidth
- mask
.offsetWidth
? small
.offsetWidth
- mask
.offsetWidth
: x
y
= y
>= small
.offsetHeight
- mask
.offsetHeight
? small
.offsetHeight
- mask
.offsetHeight
: y
mask
.style
.left
= x
+ 'px'
mask
.style
.top
= y
+ 'px'
var bigX
= bigImg
.offsetWidth
- big
.offsetWidth
var bigY
= bigImg
.offsetHeight
- big
.offsetHeight
var bigMoveX
= x
* bigX
/ (small
.offsetWidth
- mask
.offsetWidth
)
var bigMoveY
= y
* bigY
/ (small
.offsetHeight
- mask
.offsetHeight
)
bigImg
.style
.marginLeft
= -bigMoveX
+ 'px'
bigImg
.style
.marginTop
= -bigMoveY
+ 'px'
}
类似与京东进行图片的缩放，一张大图，一张小图
资源文件
small
big
yanji
Processed:
0.012, SQL:
9
