京东商品放大镜

Posted qtbb

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了京东商品放大镜相关的知识,希望对你有一定的参考价值。

<!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>Document</title>
    <style>
        #box {
            position: relative;
        }
        
        .small_box {
            background: darkorchid;
            width: 300px;
            height: 250px;
            border: 1px solid gainsboro;
            position: relative;
        }
        
        .small {
            width: 300px;
            height: 250px;
        }
        
        .layer {
            background: darkorange;
            opacity: .5;
            width: 150px;
            height: 150px;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        
        .big_box {
            width: 400px;
            height: 300px;
            border: gainsboro 1px solid;
            background: greenyellow;
            position: absolute;
            top: 0;
            left: 300px;
            display: none;
            overflow: hidden;
        }
        
        .big {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div id="box">
        <div class="small_box">
            <img src="../../../imgs/4.png" class="small">
            <div class="layer"></div>
        </div>

        <div class="big_box">
            <img src="../../../imgs/4.png" class="big">
        </div>
    </div>
    <script>
        var box = document.getElementById(box);
        var small_box = document.querySelector(.small_box);
        var small = document.querySelector(.small);
        var layer = document.querySelector(.layer);
        var big_box = document.querySelector(.big_box);
        var big = document.querySelector(.big);
        small_box.addEventListener(mouseover, function() {
            layer.style.display = block;
            big_box.style.display = block;
            layer.style.cursor = move;
        })
        small_box.addEventListener(mouseout, function(e) {
            layer.style.display = none;
            big_box.style.display = none;
        })
        layer.addEventListener(mousemove, function(e) {
            //获得鼠标位置
            var layerX = e.pageX - layer.offsetWidth / 2;
            var layerY = e.pageY - layer.offsetHeight / 2;
            //限制遮盖层X轴的移动位置
            layerX = layerX < 0 ? layerX = 0 : layerX;
            var maxX = small.offsetWidth - layer.offsetWidth;
            layerX = layerX > maxX ? layerX = maxX : layerX;
            //限制遮盖层Y轴的移动位置
            layerY = layerY < 0 ? layerY = 0 : layerY;
            var maxY = small.offsetHeight - layer.offsetHeight;
            layerY = layerY > maxY ? layerY = 100 : layerY;
            //赋值给layer的 top 和 left
            layer.style.left = layerX + px;
            layer.style.top = layerY + px;

            // 遮挡层移动距离 layerX 和 layerY
            // 遮挡层的最大移动距离 maxX 和 maxY
            // 大图片最大移动距离 bigMaxX 和 bigMaxY
            var bigMaxX = big.offsetWidth - big_box.offsetWidth;
            var bigMaxY = big.offsetHeight - big_box.offsetHeight;
            // 大图的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
            var bigX = layerX * bigMaxX / maxX;
            var bigY = layerY * bigMaxY / maxY;
            big.style.left = -bigX + px;//因为是反方向移动,所以是 负值
            big.style.top = -bigY + px;
        })
    </script>
</body>

</html>

 

以上是关于京东商品放大镜的主要内容,如果未能解决你的问题,请参考以下文章

仿京东放大镜

JS (随着鼠标的移动,旁边显示放大图)

京东放大镜效果

爬取京东商品

jQuery实现仿京东商城图片放大镜

京东商品详情页模板怎么生成Html代码