JavaScript制作商城的放大镜效果

最新推荐文章于 2023-03-31 13:39:30 发布

i_Lucien

最新推荐文章于 2023-03-31 13:39:30 发布

阅读量459

点赞数

分类专栏： web 文章标签： javascript css3 css

本文链接：https://blog.csdn.net/i_lucien/article/details/122516153

版权

web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

商城放大细节案例：

记录了一些属性使用时需要注意的点。

需要注意的问题：

element.style.top = '100px';
element 元素一定要设置绝对定位才可以设置top
注意是设置style.top
设置的值一定要包含单位px
img_elem.width
这样可以获取图片元素的宽度，获得的是数字，不带有单位
element.offsetTop
获得的是 element 距离其最近的带有定位的父元素的上边距
let ratio = (big_img.width - big_img.parentNode.offsetWidth) / (small_box.offsetWidth - mask.offsetWidth);
用大图片的最大移动距离除以遮盖层的最大移动距离得到它们的移动距离之比，即遮盖层移动 1 px，放大的大图就要移动 ratio px。
限制遮盖层遮盖层不能跑出商品区域之外。

// 计算鼠标在物品显示区域元素内的相对位置
let x_inner_box = e.pageX - small_box.offsetLeft;
let y_inner_box = e.pageY - small_box.offsetTop;
// 将鼠标指针置于遮盖层中间，同时将遮盖层固定在物品显示区域内
let x_mask = (x_inner_box - mask.offsetWidth / 2 > 0 ? x_inner_box - mask.offsetWidth / 2 : 0) > 99 ? 99 : (x_inner_box - mask.offsetWidth / 2 > 0 ? x_inner_box - mask.offsetWidth / 2 : 0);
let y_mask = (y_inner_box - mask.offsetWidth / 2 > 0 ? y_inner_box - mask.offsetWidth / 2 : 0) > 102 ? 102 : (y_inner_box - mask.offsetWidth / 2 > 0 ? y_inner_box - mask.offsetWidth / 2 : 0);

示例：

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品放大镜效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul li {
            list-style: none;
        }

        .clearfix:after {
            /*添加的内容尽量不要为空，否则旧版本浏览器会有空隙*/
            content: ".";
            /*转换为块级元素*/
            display: block;
            /*将高度设置为 0*/
            height: 0;
            /*设置为不可见*/
            visibility: hidden;
            /*清除浮动*/
            clear: both;
        }

        .clearfix {
            *zoom: 1;
            /* *代表IE 6、7 能够识别的特殊符号，带有*的这句只有IE 6、7才执行 */
            /* zoom 为其清除浮动的方法 */
        }

        /*设置 header 的样式*/
        .header {
            margin-bottom: 12px;
            background-color: #222222;
        }

        .header .nav ul {
            text-align: center;
        }

        .header .nav li {
            display: inline-block;
            width: 120px;
            line-height: 60px;
            font-size: 20px;
            color: #cccccc;
        }

        .header .nav li:hover {
            background-color: #333333;
        }

        /*设置版心*/
        .container {
            width: 1200px;
            margin: 0 auto;

            /*height: 300px;*/
            /*background-color: pink;*/
        }

        .container .left_box {
            border: 1px solid #cccccc;
            float: left;
            position: relative;
        }

        .container .right_box {
            width: 830px;
            float: right;
            /*background-color: lightblue;*/
        }

        .container .right_box h3 {
            font-weight: 600;
            margin-bottom: 10px;
        }

        .container .right_box p {
            font-size: 12px;
            color: red;
            margin-bottom: 10px;
        }

        .right_box .summary-price {
            background-color: rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            /*opacity: 0.3;*/
        }

        .right_box .summary-price .attr-price {
            margin-top: 24px;
            float: left;
        }

        .right_box .summary-price .price-display span:nth-child(1) {
            font-size: 20px;
        }

        .right_box .summary-price .price-display span:nth-child(2) {
            font-size: 40px;
            color: red;
            margin-right: 20px;
        }

        .dt {
            float: left;
            width: 90px;
            line-height: 40px;
        }

        .item {
            float: left;
            /*width: 100px;*/
            padding: 0 12px;
            line-height: 40px;
            border: 1px solid #cccccc;
            margin-right: 8px;
            text-align: center;
        }

        .item img {
            float: left;
            width: 40px;
        }

        .dd .selected {
            border: 1px solid red;
        }

        div[class^='choose-'] {
            margin: 13px 0;
        }

        /*设置遮挡层*/
        .left_box .mask {
            width: 250px;
            height: 250px;
            background-color: #FEDE4F;
            opacity: 0.5;
            position: absolute;
            top: 0;
            left: 0;
            border: 1px solid #cccccc;
            cursor: move;
            display: none;
        }

        .left_box .big {
            width: 500px;
            height: 500px;
            position: absolute;
            top: 0;
            left: 370px;
            z-index: 999;
            overflow: hidden;
            display: none;
        }
        .left_box .big img {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="nav">
        <ul>
            <li>首页</li>
            <li>促销</li>
            <li>会员</li>
            <li>配送</li>
            <li>退换</li>
            <li>关于</li>
        </ul>
    </div>
</div>
<div class="container">
    <div class="left_box">
        <img src="images/phone.png" width="350" alt="">
        <div class="mask"></div>
        <div class="big"><img src="images/phone.png" alt=""></div>
    </div>
    <div class="right_box">
        <h3>Apple iPhone 13 (A2634) 128GB 蓝色 支持移动联通电信5G 双卡双待手机</h3>
        <p>【新年有新意】15-16号限时限量抢以旧换新9.7折券！购机另享12期免息&30天价保！选购[快充套装]加99元得20W快充头!更多优惠！</p>
        <div class="summary-price">
            <div class="display-area">
                <span class="attr-price">价&nbsp;&nbsp;格：</span>
                <div class="price-display">
                    <span>￥</span>
                    <span>5999.00</span>
                    <a href="javascript:;">降价通知</a>
                </div>
            </div>
        </div>

        <div class="choose-attr1 clearfix">
            <div class="dt">选择颜色：</div>
            <div class="dd">
                <div class="item" data-value="蓝色">
                    <img src="images/phone-blue.png" alt="no-img">
                    <span>蓝色</span>
                </div>
                <div class="item" data-value="粉色">
                    <img src="images/phone-pink.png" alt="no-img">
                    <span>粉色</span>
                </div>
                <div class="item" data-value="午夜黑">
                    <img src="images/phone-dark.png" alt="no-img">
                    <span>午夜黑</span>
                </div>
                <div class="item" data-value="红色">
                    <img src="images/phone-red.png" alt="no-img">
                    <span>红色</span>
                </div>
                <div class="item" data-value="白色">
                    <img src="images/phone-white.png" alt="no-img">
                    <span>白色</span>
                </div>
            </div>
        </div>
        <div class="choose-attr2 clearfix">
            <div class="dt">选择版本：</div>
            <div class="dd">
                <div class="item" data-value="128G">
                    <span>128G</span>
                </div>
                <div class="item" data-value="256G">
                    <span>256G</span>
                </div>
                <div class="item" data-value="512G">
                    <span>512G</span>
                </div>
                <div class="item" data-value="1T">
                    <span>1T</span>
                </div>
            </div>
        </div>
        <div class="choose-attr3 clearfix">
            <div class="dt">套装版本：</div>
            <div class="dd">
                <div class="item" data-value="套餐一">
                    <span>套餐一</span>
                </div>
                <div class="item" data-value="套餐二">
                    <span>套餐二</span>
                </div>
                <div class="item" data-value="套餐三">
                    <span>套餐三</span>
                </div>
                <div class="item" data-value="套餐四">
                    <span>套餐四</span>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 设置购买版本选项样式
    let attrs = document.querySelectorAll('div[class^="choose-"]');
    for (let i = 0; i < attrs.length; i++) {
        attrs[i].addEventListener('click', function (e) {
            console.log(e.path)
            if (e.path.length === 10) {
                // 如果点击到的是 img 或者 span，那么 path 就有 10 个元素
                // dd 为第 2 个，使用排他思想将 dd 的直接子元素 item 的边框修改为未选中的样式
                let items = e.path[2].children;
                for (let j = 0; j < items.length; j++) {
                    items[j].className = 'item';
                }
                // item 为第 1 个，将该点击的 item 边框设置为红色选中状态
                let target = e.path[1];
                target.className = 'item selected';
            } else {
                // 如果点击到的是 item 元素，那么 path 就有 9 个元素
                let items = e.path[1].children;
                for (let j = 0; j < items.length; j++) {
                    items[j].className = 'item';
                }
                let target = e.path[0];
                target.className = 'item selected';
                console.log(target.style.className);
            }
        })
    }

    let small_box = document.querySelector('.left_box');
    let mask = document.querySelector('.left_box .mask');
    let big_box = document.querySelector('.left_box .big');
    let big_img = document.querySelector('.left_box .big img');
    // 当鼠标经过展示商品的小盒子就显示遮挡层和大盒子，离开则隐藏
    small_box.addEventListener('mouseover', function () {
        mask.style.display = 'block';
        big_box.style.display = 'block';

        this.addEventListener('mousemove', move_mask);
    });
    small_box.addEventListener('mouseout', function () {
        mask.style.display = 'none';
        big_box.style.display = 'none';

        this.removeEventListener('mousemove', move_mask);

    });

    function move_mask(e) {
        let x_inner_box = e.pageX - small_box.offsetLeft;
        let y_inner_box = e.pageY - small_box.offsetTop;

        let x_mask = (x_inner_box - mask.offsetWidth / 2 > 0 ? x_inner_box - mask.offsetWidth / 2 : 0) > 99 ? 99 : (x_inner_box - mask.offsetWidth / 2 > 0 ? x_inner_box - mask.offsetWidth / 2 : 0);
        let y_mask = (y_inner_box - mask.offsetWidth / 2 > 0 ? y_inner_box - mask.offsetWidth / 2 : 0) > 102 ? 102 : (y_inner_box - mask.offsetWidth / 2 > 0 ? y_inner_box - mask.offsetWidth / 2 : 0);

        // 用大图片的最大移动距离除以遮盖层的最大移动距离得到它们的移动距离之比
        let ratio = (big_img.width - big_img.parentNode.offsetWidth) / (small_box.offsetWidth - mask.offsetWidth);
        // 移动遮盖层
        mask.style.top = y_mask + 'px';
        mask.style.left = x_mask + 'px';
        // 按比例移动大图片
        big_img.style.top = - y_mask * ratio + 'px';
        big_img.style.left = - x_mask * ratio + 'px';
    }
</script>
</body>
</html>

i_Lucien

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript制作商城的放大镜效果

商城放大细节案例：记录了一些属性使用时需要注意的点。需要注意的问题：element.style.top = '100px';element 元素一定要设置绝对定位才可以设置top注意是设置style.top设置的值一定要包含单位pximg_elem.width这样可以获取图片元素的宽度，获得的是数字，不带有单位element.offsetTop获得的是 element 距离其最近的带有定位的父元素的上边距let ratio = (big_img.width - big_img.pa
复制链接

扫一扫

专栏目录