<!DOCTYPE html
>
<
html
>
<
head
lang=
"en"
>
<
meta
charset=
"UTF-8"
>
<
title
>放大镜
</
title
>
<
script
src=
"http://libs.baidu.com/jquery/2.0.0/jquery.js"
>
<
/
script
>
<
style
>
* {
margin:
0;
padding:
0;
}
body {
padding:
200px
400px;
}
div.small,
div.big {
width:
250px;
height:
250px;
position:
relative;
display:
inline-block;
top:
0;
overflow:
hidden;
border:
1px
solid
#333;
}
div.big>
img{
position:
absolute;
left:
0;
top:
0;
}
div.glass {
width:
125px;
height:
125px;
background:
rgba(
117,
117,
117,
0.4);
position:
absolute;
left:
0;
top:
0;
border:
2px
solid
rgba(
255,
255,
255,
0.5);
}
<
/
style
>
</
head
>
<
body
>
<
div
class=
"small"
>
<
div
class=
"glass"
></
div
>
<
img
src=
"./Small.jpg"
alt=
""
>
</
div
>
<
div
class=
"big"
>
<
img
src=
"./Big.jpg"
alt=
""
>
</
div
>
</
body
>
<
script
>
$(
'.glass').
mousedown(
function (
e) {
let
mouseX =
e.
pageX;
//获取鼠标下落位置
let
mouseY =
e.
pageY;
let
oldleft =
$(
'.glass').
position().
left;
//获取放大镜坐标
let
oldtop =
$(
'.glass').
position().
top;
$(
window).
mousemove(
function (
e) {
// 移动放大镜
let
mouseMoveX =
e.
pageX -
mouseX
//左右移动距离
let
mouseMoveY =
e.
pageY -
mouseY
//上下移动距离
// 改变镜片位置
let
newLeft =
mouseMoveX +
oldleft;
let
newtop =
mouseMoveY +
oldtop
// 规定镜片界限
let
smallW =
$(
'.small').
width()
//获取小盒子宽度
let
smallH =
$(
'.small').
height()
//获取小盒子宽度
let
glassW =
$(
'.glass').
width()
//获取镜片的宽度
let
glassH =
$(
'.glass').
height()
//获取镜片的高度
let
bigW =
$(
'.big').
width()
//获取大盒子宽度
let
bigH =
$(
'.big').
width()
//获取大盒子高度
if (
newLeft <=
0) {
newLeft =
0
}
if (
newLeft >=
smallW -
glassW) {
newLeft =
smallW -
glassW
}
if (
newtop <=
0) {
newtop =
0
}
if (
newtop >=
smallH -
glassH) {
newtop =
smallH -
glassH
}
//改变玻璃位置
$(
'.glass').
css({
left:
newLeft,
top:
newtop,
})
//大小图联动
let
biliW =
newLeft/
glassW
let
biliH =
newtop/
glassH
$(
'div.big>img').
css({
left:-
bigW*
biliW,
top:-
bigH*
biliH
})
return
false
})
$(
window).
mouseup(
function (
e) {
$(
window).
off()
return
false
})
return
false
})
<
/
script
>
</
html
>