javascript实现商品图片放大效果，类似于淘宝、京东详情页
2020-05-16 本文已影响0人
谁的青春不迷茫_5c6a
效果图
效果图
文件夹结构
-
HTML/CSS/JS 代码分别保存在 index.html / main.css / main.js 文件中，而main.css / main.js 文件分别保存在 css 和 js 文件夹下；素材图片名为 pic01.jpg 保存在 images 文件夹下。具体情况如下图如示
文件夹结构示意图
素材
素材图片
源代码
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>放大镜效果</title>
<!--css文件保存在css文件夹下-->
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="box">
<div class="show">
<!-- 原图 -->
<!--图片素材保存在images文件夹下-->
<img src="images/pic01.jpg" alt="">
<!-- 滑块 -->
<span class="move"></span>
</div>
<!-- 放大区域 -->
<div class="zoom">
<img class="big" src="images/pic01.jpg" alt="">
</div>
</div>
<!--js文件保存在js文件夹下-->
<script src="js/main.js"></script>
</body>
</html>
CSS代码
/* 清除默认样式 */
*{
margin: 0;
padding: 0;
}
.box{
width: 450px;
height: 450px;
margin: 100px 0 0 300px;
border: 1px solid #eee;
position: relative;
}
.box img{
display: block;
}
/* 移动滑块 */
.box .move{
width: 200px;
height: 200px;
background-color: rgba(0,0,0,0.3);
position: absolute;
left: 0;
bottom: 0;
/* 十字形指针 */
cursor: crosshair;
/* 一开始不出现 */
display: none;
}
/* 放大区域 */
.box .zoom{
width: 450px;
height: 450px;
position: absolute;
background-color: #eeeeee;
left: 450px;
top: 0;
border: 1px solid red;
display: none;
overflow: hidden;
}
/* 大图 */
.box .zoom img{
position: absolute;
left: 0;
top: 0;
}
JS代码
// 获取父容器，以及它的宽高
var box = document.querySelector(".box");
var boxWidth = box.offsetWidth;
var boxHeight = box.offsetHeight;
var show = document.querySelector(".show");
var showWidth = show.offsetWidth;
var showHeight = show.offsetHeight;
var move = document.querySelector(".move");
var moveWidth;
var moveHeight;
var zoom = document.querySelector(".zoom");
// 获取大图
var big = document.querySelector(".big");
// 宽高比例
var pixW;
var pixH;
// 鼠标进入时，显示move 和 zoom区域，并获取move的宽高，
// 因为一开始move是隐藏的，那时获取的宽高是0
show.onmouseenter = function(){
move.style.display = "block";
zoom.style.display = "block";
moveWidth = move.offsetWidth;
moveHeight = move.offsetHeight;
// 计算move 相对于show 的宽高比例
pixW = moveWidth/showWidth;
pixH = moveHeight/showHeight;
var zoomWidth = zoom.offsetWidth;
var zoomHeight = zoom.offsetHeight;
// 设置右边大图的尺寸
big.style.width = zoomWidth/pixW + "px";
big.style.height = zoomHeight/pixH + "px";
}
// 当鼠标离开 show 区域时，move 和 zoom 全部消失
show.onmouseleave = function(){
move.style.display = "none";
zoom.style.display = "none";
}
// 给show 添加mousemove 事件
show.onmousemove = function(event){
// 处理兼容性问题
event = event || window.event;
// 鼠标相当于浏览器窗口的坐标
var cliX = event.clientX;
var cliY = event.clientY;
// show 区域(与box 尺寸相同)相当于浏览器窗口的距离
var ol = box.offsetLeft;
var ot = box.offsetTop;
// 计算鼠标在show 中的相对坐标
var left = cliX-ol;
var top = cliY-ot;
// console.log(left,top);
// 控制滑块移动的范围
if(left<=(moveWidth/2)){
// 左边
move.style.left = "0px";
}else if(left>=(showWidth-moveWidth/2)){
// 右边
move.style.left = (showWidth-moveWidth)+"px";
}else{
move.style.left = left-(moveWidth/2)+"px";
}
if(top<=(moveHeight/2)){
// 上边
move.style.top = "0px";
}else if(top>=(showHeight-moveHeight/2)){
// 下边
move.style.top = (showHeight-moveHeight)+"px";
}else{
move.style.top = top-(moveHeight/2)+"px";
}
// 设置大图的位置
// 注意大图的移动方向是和move 相反的
big.style.left = -parseFloat(move.style.left)/pixW + "px";
big.style.top = -parseFloat(move.style.top)/pixH + "px";
}
最后
本人水平有限，如有错误或疏漏之处，欢迎读者朋友在下方评论
