- 技术
- 原生html,js+jq实现放大镜效果
原生html js+jq实现放大镜效果
先上效果图
直接上代码
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<meta name
="viewport" content
="width=device-width, initial-scale=1.0">
<title
>Document
</title
>
<script src
="https://code.jquery.com/jquery-3.1.1.min.js"></script
>
<style
>
* {
margin
: 0;
padding
: 0;
}
.proImage
{
position
: relative
;
}
.small_box
{
width
: 380px
;
height
: 380px
;
margin
-left
: 10px
;
margin
-top
: 10px
;
position
: relative
;
}
.small_box img
{
width
: 380px
;
height
: 380px
;
}
.small_box
.mask
{
position
: absolute
;
width
: 100%;
height
: 100%;
background
: rgba(0, 0, 0, 0.5);
opacity
: 0;
z
-index
: 2;
cursor
: move
;
}
.small_box
.float_layer
{
position
: absolute
;
width
: 120px
;
height
: 120px
;
background
: rgba(0, 0, 0, 0.5);
display
: none
;
}
.big_box
{
position
: absolute
;
left
: 410px
;
top
: 10px
;
width
: 380px
;
height
: 380px
;
overflow
: hidden
;
display
: none
;
}
.big_box img
{
position
: absolute
;
}
</style
>
</head
>
<body
>
<!-- 放大镜效果
-->
<div
class="proImage">
<div
class="small_box">
<span
class="mask"></span
>
<span
class="float_layer"></span
>
<img src
="http://img30.360buyimg.com/popWaterMark/jfs/t193/215/2520155054/118740/88c7c931/53d0af19Nfe55f8f4.jpg">
</div
>
<div
class="big_box">
<img src
="http://img30.360buyimg.com/popWaterMark/jfs/t193/215/2520155054/118740/88c7c931/53d0af19Nfe55f8f4.jpg">
</div
>
</div
>
<script src
="https://code.jquery.com/jquery-3.1.1.min.js"></script
>
<script
>
$(".mask").mouseover(function () {
$(".float_layer").show()
$(".big_box").show()
})
$(".mask").mouseout(function () {
$(".float_layer").hide()
$(".big_box").hide()
})
$(".mask").mousemove(function (e
) {
var l
= e
.pageX
- $(".small_box").offset().left
- ($(".float_layer").width() / 2)
var t
= e
.pageY
- $(".small_box").offset().top
- ($(".float_layer").height() / 2)
if (l
< 0) {
l
= 0
}
if (l
> $(this).width() - $(".float_layer").width()) {
l
= $(this).width() - $(".float_layer").width()
}
if (t
< 0) {
t
= 0
}
if (t
> $(this).height() - $(".float_layer").height()) {
t
= $(this).height() - $(".float_layer").height()
}
$(".float_layer").css({
"left": l
,
"top": t
})
var pX
= l
/ ($(".mask").width() - $(".float_layer").width())
var pY
= t
/ ($(".mask").height() - $(".float_layer").height())
$(".big_box img").css({
"left": -pX
* ($(".big_box img").width() - $(".big_box").width()),
"top": -pY
* ($(".big_box img").height() - $(".big_box").height())
})
})
</script
>
</body
>
</html
>
Processed:
0.009, SQL:
9
