js实现放大镜

最新推荐文章于 2024-08-25 09:57:22 发布

k.omo

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量262

点赞数

文章标签： javascript html webview

本文链接：https://blog.csdn.net/m0_56621561/article/details/122982885

版权

JavaScript 前端开发图片预览事件监听 CSS定位

关键词由CSDN通过智能技术生成

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

margin: 0px;

padding: 0px;

}

.box {

width: 350px;

height: 350px;

border: 1px solid;

position: relative;

margin-left: 50px;

}

.box1 {

width: 350px;

height: 350px;

border: 1px solid red;

position: absolute;

top: 0px;

left: 0px;

}

.box2 {

width: 150px;

height: 150px;

background: rgba(17, 252, 252, 0.171);

position: absolute;

left: 0px;

top: 0px;

display: none;

}

.bigBox {

width: 400px;

height: 400px;

border: 1px solid red;

position: absolute;

left: 380px;

overflow: hidden;

display: none;

top: 0px;

}

.bigBox img {

position: absolute;

border: 1px solid red;

}

</style>

</head>

<body>

</div>

</div>

</body>

</html>

document.body.offsetLeft

class Enlarge {

constructor(box) {

this.box = box

this.box1 = this.box.children[0]

this.bigBox = this.box.children[1]

this.box2 = this.box1.children[0]

this.bigImg = this.bigBox.children[0]

this.bindEvents()

}

bindEvents() {

this.box1.onmouseover = () => {

this.show()

}

this.box1.onmouseout = () => {

this.hide()

}

this.box1.onmousemove = (e) => {

var e = e || event

this.move(e)

}

show() {

this.box2.style.display = 'block'

this.bigBox.style.display = 'block'

}

hide() {

this.box2.style.display = 'none'

this.bigBox.style.display = 'none'

}

move(e) {

this.box2Move(e)

this.bigImgMove()

}

bigImgMove() {

let lv = (this.bigImg.offsetWidth - this.bigBox.clientWidth) / (this.box1.clientWidth - this.box2.offsetWidth)

this.bigImg.style.left = -this.box2.offsetLeft * lv + 'px'

this.bigImg.style.top = -this.box2.offsetTop * lv + 'px'

}

box2Move(e) {

//获取鼠标坐标

let x = e.clientX - this.box.offsetLeft

let y = e.clientY - this.box.offsetTop

let xx = x - this.box2.offsetWidth / 2;

let yy = y - this.box2.offsetHeight / 2

//边界设置

if (xx <= 0) {

xx = 0

}

if (xx >= this.box1.clientWidth - this.box2.offsetWidth) {

xx = this.box1.clientWidth - this.box2.offsetWidth

}

if (yy <= 0) {

yy = 0

}

if (yy >= this.box1.clientHeight - this.box2.offsetHeight) {

yy = this.box1.clientHeight - this.box2.offsetHeight

}

this.box2.style.left = xx + 'px'

this.box2.style.top = yy + 'px'

}

let oBox = document.querySelector('.box')

new Enlarge(oBox)

默认遮罩和大区域隐藏

鼠标移入：可视区域-----》遮罩和大区域显示

鼠标移出：可视区域-----》遮罩和大区域移出

鼠标移动：遮罩跟随，大图动

lv = 大图移动的最大距离/小遮罩移动的最大距离 = 大图移动了多少(?)/小遮罩移动了多少

lv = (this.bigImg.offsetWidth - this.bigBox.clientWidth) / (this.smallBox.clientWidth - this.mask.offsetWidth)

？ = -小遮罩移动了多少*lv

遮罩大小：

width/350 = 400/800

图片需要一个小图一个大图。原理就是大图隐藏。当划过的时候大图显示并且按着公式项相负轴移动，我用的图是小图350*350 大图800*800的

</script>

k.omo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现放大镜

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document&lt
复制链接

扫一扫