本文介绍如何使用原生JavaScript封装一个仿淘宝风格的图片放大镜组件。通过配置遮罩层颜色、透明度及放大倍数，实现鼠标悬停时的局部放大查看功能。文章提供了HTML结构、CSS样式及核心JS逻辑代码，适合前端开发者参考学习。
功能概述与实现思路
本文分享一个仿照淘宝风格实现的图片放大镜效果封装案例，供读者参考。
当前版本已实现基本的放大功能，但尚未包含下方的缩略图导航选择功能，后续会进行封装完善。此外，待考试结束后，计划推出基于Vue版本的放大镜效果。以下是具体实现代码。
HTML结构实现
HTML结构代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<div class="magnify">
<div class="magnify_conatiner">
<div class="magnify_preview">
<img class="sizeimg" src="../../../image/1.jpg" alt="">
<div class="magnif_mask"></div>
<div class="margnif_big">
<img class="bigImg" src="../../../image/1.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
<script src="js/index.js"></script>
<script>
var list = {
BackgroundColor:'red',//遮罩层 颜色 必填
Opacity:0.2,//遮罩层透明度 随意
size:1.5 //放大倍数 必填
}
init(list)
</script>
</body>
</html>CSS样式定义
CSS样式代码如下：
.magnify_conatiner {
width: 500px;
height: 500px;
margin: 50px 50px;
}
.magnify_conatiner .magnify_preview {
position: relative;
height: 400px;
border: 1px silver solid;
background-color: red;
}
div.magnify_preview .sizeimg {
height: 100%;
width: 100%;
}
.magnify_conatiner .magnify_preview .magnif_mask{
position: absolute;
top: 0;
left: 0;
opacity: .5;
border: 1px solid #ccc;
cursor: move;
display: none;
}
.margnif_big{
position: absolute;
display: none;
top: 0px;
left: 501px;
width: 450px;
height: 450px;
z-index: 999;
border: 1px solid #ccc;
overflow: hidden;
}
.margnif_big img{
position: absolute;
top: 0;
left: 0;
}JavaScript核心逻辑封装
封装好的JavaScript核心逻辑代码如下：
function init(obj) {
if (obj.BackgroundColor && obj.size) {
var maskBigColor = obj.BackgroundColor
var maskSize = obj.size
var maskOpacity = obj.Opacity
if(maskOpacity === undefined){
maskOpacity = 0.2
}
var magnify_preview = document.querySelector('.magnify_preview')
var mask = document.querySelector('.magnif_mask')
var big = document.querySelector('.margnif_big')
var bigIMG = document.querySelector('.bigImg')
mask.style.height = obj.size * 100 + 'px'
mask.style.width = obj.size * 100 + 'px'
mask.style.backgroundColor = obj.BackgroundColor
mask.style.opacity = maskOpacity
magnify_preview.addEventListener('mouseover', function () {
mask.style.display = 'block'
big.style.display = 'block'
})
magnify_preview.addEventListener('mouseout', function () {
mask.style.display = 'none'
big.style.display = 'none'
})
magnify_preview.addEventListener('mousemove', function (e) {
var x = e.pageX - this.offsetLeft
var y = e.pageY - this.offsetTop
var maskX = x - mask.offsetWidth / 2
var maskY = y - mask.offsetHeight / 2
var magnify_previewX = magnify_preview.offsetWidth
var magnify_previewY = magnify_preview.offsetHeight
var maskMaxX = magnify_preview.offsetWidth - mask.offsetWidth
var maskMaxY = magnify_preview.offsetHeight - mask.offsetHeight
if (maskX <= 0) {
maskX = 0
} else if (maskX >= magnify_previewX - mask.offsetWidth) {
maskX = magnify_previewX - mask.offsetWidth
}
if (maskY <= 0) {
maskY = 0
} else if (maskY >= magnify_previewY - mask.offsetHeight) {
maskY = magnify_previewY - mask.offsetHeight
}
mask.style.left = maskX + 'px'
mask.style.top = maskY + 'px'
//大图片的移动距离 = 遮挡层的移动距离*大图片最大移动距离 / 遮挡层最大移动距离
var bigMaxX = bigIMG.offsetWidth - big.offsetWidth
var bigImgY = bigIMG.offsetHeight - big.offsetHeight
var bigX = maskX * bigMaxX / maskMaxX
var bigY = maskY * bigImgY / maskMaxY
bigIMG.style.left = - bigX + 'px'
bigIMG.style.top = - bigY + 'px'
})
} else {
console.log('error')
}
}考试结束后将继续完善相关功能。示例中的图片路径请用户自行替换，此处未使用网络图片。
效果展示与总结
最终效果展示如下：
以上就是本文的全部内容，希望对各位的学习有所帮助，也欢迎大家继续支持本站。