js京东图片放大镜效果。

Posted akangwx0624

tags:

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <style>
        *
            margin: 0;
            padding: 0;
       
        /* 去除图片的3px */
        img
            vertical-align: top;
       
        /* 容器样式 */
        .container
            width: 350px;
            height: 350px;
            margin:100px;
            border: 1px solid #ccc;
            position: relative;
       
        /* 鼠标盒子样式 */
        .mouse
            position: relative;
       
        /* 大鼠标盒子样式 */
        .mouseBigSize
            width: 450px;
            height: 450px;
            position: absolute;
            top: 0;
            left: 370px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
       
        /* 大鼠标盒子里面图片样式 */
        .mouseBigSize img
            position: absolute;
            top: 0;
            left: 0;
       
        /* 遮罩层样式 */
        .mask
            width: 100px;
            height: 100px;
            background: rgba(255, 255, 0, 0.4);
            position: absolute;
            top: 0;
            left: 0;
            cursor: move;
            display: none;
       
    </style>
</head>
<body>
    <div class="container">
        <!-- 小鼠标 -->
        <div class="mouse">
            <img src="./images/mouse.jpg" >
            <!-- 遮罩层 -->
            <div class="mask"></div>
        </div>
        <!-- 大鼠标 -->
        <div class="mouseBigSize">
            <img src="./images/mouseBigSize.jpg" >
        </div>
    </div>
    <script>
        // 获取DOM元素
        let container = document.getElementsByClassName("container")[0]; // 获得最大的盒子
        let mouse = document.getElementsByClassName("mouse")[0]; // 获取小鼠标盒子
        let mouseBigSize = document.getElementsByClassName("mouseBigSize")[0]; // 获取大鼠标盒子
        let bigImg = mouseBigSize.children[0]; // 获取大盒子里面的图片
        let mask = document.getElementsByClassName("mask")[0]; // 获取遮罩层
        // 给小盒子添加mouseover事件
        mouse.onmouseover = function()
            mask.style.display = "block";
            mouseBigSize.style.display = "block";
       
        // 给小盒子添加mouseout事件
        mouse.onmouseout = function()
            mask.style.display = "none";
            mouseBigSize.style.display = "none";
       
        // 初始化x轴和y轴
        let x = 0,y = 0;
        // 给小盒子添加mousemove事件
        mouse.onmousemove = function(event)
            x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth / 2;
            y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight / 2;
            // 进行边界判断
            if(x < 0)
           
                x = 0;
           
            if(x > mouse.offsetWidth - mask.offsetWidth)
           
                x = mouse.offsetWidth - mask.offsetWidth;
           
            if(y < 0)
           
                y = 0;
           
            if(y > mouse.offsetHeight - mask.offsetHeight)
           
                y = mouse.offsetHeight - mask.offsetHeight;
           
            // 重新给遮罩层的left和top赋值
            mask.style.left = x + "px";
            mask.style.top = y + "px";
            /* 
                计算:弟弟一顿吃2个馒头,哥哥一顿吃4个馒头,问:弟弟今天吃了3个馒头,哥哥应该吃几个馒头?
                计算出他们的倍数   4 / 2    2倍
                3 * 2  == 6个 
            */

            /* 
                大图盒子 / 小图盒子 = 倍数
                我们 再小图移动的距离 *  倍数  ==  大图的位置
            */
            bigImg.style.left = -x * mouseBigSize.offsetWidth / mouse.offsetWidth + "px";
            bigImg.style.top = -y * mouseBigSize.offsetHeight / mouse.offsetHeight + "px";
       
    </script>
</body>
</html>

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

京东放大镜效果

0189 案例:仿京东放大镜效果

仿京东放大镜效果的实现

放大镜效果

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

前端必学——用JavaScript实现电商图片放大镜效果(附代码)