javascript实现商品图片放大效果，类似于淘宝、京东详情页的那种...

效果图

文件夹结构

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";
}

最后

本人水平有限，如有错误或疏漏之处，欢迎读者朋友在下方评论