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

向右看齐 2023-03-14 08:12 76阅读 0赞

## 效果图 ##

![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTAyODQ0_size_16_color_FFFFFF_t_70]

## 文件夹结构 ##

*  HTML/CSS/JS 代码分别保存在 index.html / main.css / main.js 文件中，而main.css / main.js 文件分别保存在 css 和 js 文件夹下；素材图片名为 pic01.jpg 保存在 images 文件夹下。具体情况如下图如示  
    ![文件夹结构示意图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTAyODQ0_size_16_color_FFFFFF_t_70 1]

## 素材 ##

![素材图片][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTAyODQ0_size_16_color_FFFFFF_t_70 2]

## 源代码 ##

#### 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>
        
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <div class="box">
            <div class="show">
                
                
                <img src="images/pic01.jpg" alt="">
                
                <span class="move"></span>
            </div>
            
            <div class="zoom">
                <img class="big" src="images/pic01.jpg" alt="">
            </div>
        </div>
    	
        <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";
    }

## 最后 ##

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTAyODQ0_size_16_color_FFFFFF_t_70]: /images/20230312/1ea2baf9eb4c419e89bfeb93d26f788c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTAyODQ0_size_16_color_FFFFFF_t_70 1]: /images/20230312/a95fd6cd087741fabbbf05a31f23a59c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTAyODQ0_size_16_color_FFFFFF_t_70 2]: /images/20230312/0cbf8f47f5ea4614973f6178d1febc51.png