商品信息页面放大镜功能

最新推荐文章于 2022-10-09 18:22:57 发布
最新推荐文章于 2022-10-09 18:22:57 发布
阅读量313 收藏 1
点赞数
文章标签： webview elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61700044/article/details/123297132
版权

主要是针对商品进行放大功能

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>放大镜</title>
    <link rel="stylesheet" href="css/glass.css">
</head>
<body>
    <div id="glassBox" >
        <div class="glassLeft">
            <div class="showBox">
                <img src="images/show_1.jpg" alt="">
                <div class="cover"></div>
            </div>
            <ul>
                <li class="active"><img src="images/small_1.jpg" alt=""></li>
                <li><img src="images/small_2.jpg" alt=""></li>
                <li><img src="images/small_3.jpg" alt=""></li>
                <li><img src="images/small_4.jpg" alt=""></li>
            </ul>
        </div>
        <div class="glassRight">
            <img src="images/big_1.jpg" alt="">
        </div>
    </div>
    <script src="js/glass.js"></script>
    <script>
        let glass =new Glass('#glassBox')
        glass.onMouseover()
        glass.onMouseout()
        glass.showSCale()
        glass.onGlass()
        glass.onTab()
    </script>
</body>
</html>

css代码

*{
    margin: 0;
    padding: 0;
}
ul,li{
    list-style: none;
}
#glassBox{
    width: 1200px;
    margin: 50px auto;
    display: flex;
}
.glassLeft .showBox{
    width: 350px;
    position: relative;
    margin-bottom: 20px;
    cursor: pointer;
}
.glassLeft .showBox>.cover{
    width: 100px;
    height: 100px;
    background-color: rgba(172, 255, 47, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    pointer-events: none;
}
.glassLeft ul{
    display: flex;
    justify-content: space-between;
}
.glassLeft ul>li{
    cursor: pointer;
}
.glassLeft ul>li>img{
    width: 100%;
    height: 100%;
}
.glassRight{
    width: 600px;
    height: 600px;
    border: 1px solid #11c9bf;
    overflow: hidden;
    position: relative;
    margin-left: 40px;
    display: none;
}
.glassRight img{
    position: absolute;
}
.showActive{
    display: block !important;
}
ul>.active{
    border: 2px solid red;
}

js代码

/**
 * !使用class类实现
 *  *移动比例计算
 *  ? 覆盖层移动距离       覆盖层大小
 *  ? --------------  =  -----------
 *  ? 大图移动距离？        放大镜大小
 * * 显示比例计算
 *  ?    覆盖层大小         放大镜大小
 *  ? --------------  =  ----------------
 *  ?    显示盒子大小       大图显示区域大小？
 */

class Glass {
    constructor(id) {
        this.glassRoot = document.querySelector(id)
        this.showBox = this.glassRoot.querySelector('.showBox')
        this.coverBox = this.glassRoot.querySelector('.cover')
        this.ulEle = this.glassRoot.querySelector('.glassLight>ul')
        this.bigImg = this.glassRoot.querySelector('.glassRight>img')
        this.liEle = this.glassRoot.querySelectorAll('ul>li')
        this.showImg = this.glassRoot.querySelector('.showBox>img')
        this.glassBox = this.glassRoot.querySelector('.glassRight')
    }
    /**
     * !显示比列
     */
    showSCale() {
        // 放大镜的大小
        let glassBoxWidth = parseInt(window.getComputedStyle(this.glassBox).width)
        let glassBoxHeight = parseInt(window.getComputedStyle(this.glassBox).height)

        // 覆盖层的大小
        let coverBoxWidth = parseInt(window.getComputedStyle(this.coverBox).width)
        let coverBoxHeight = parseInt(window.getComputedStyle(this.coverBox).height)

        // 显示盒子的大小
        let showBoxWidth = parseInt(window.getComputedStyle(this.showBox).width)
        let showBoxHeight = parseInt(window.getComputedStyle(this.showBox).height)

        // 计算显示比例
        let w = glassBoxWidth * showBoxWidth / coverBoxWidth
        let h = glassBoxHeight * showBoxHeight / coverBoxHeight

        //设置大图片的大小
        this.bigImg.style.width = w + 'px'
        this.bigImg.style.height = h + 'px'
    }
    /**
     * !鼠标移入移出事件
     * *1.鼠标移入显示框，覆盖层出现，大图出现
     * *2.鼠标移出显示框，覆盖层隐藏，大图隐藏
     */
    onMouseover() {
        let _this = this
        this.showBox.addEventListener('mouseover', function () {
            _this.coverBox.classList.add('showActive')
            _this.glassBox.classList.add('showActive')
        })
    }
    onMouseout() {
        let _this = this
        this.showBox.addEventListener('mouseout', function () {
            _this.coverBox.classList.remove('showActive')
            _this.glassBox.classList.remove('showActive')
        })
    }
    /**
     * 放大镜效果
     */
    onGlass() {
        let _this = this
        this.showBox.addEventListener('mousemove', function (e) {
            e = e || window.event
            let x = e.offsetX - _this.coverBox.offsetWidth / 2
            let y = e.offsetY - _this.coverBox.offsetHeight / 2

            //边界检查
            if (x < 0) {
                x = 0
            }
            if (x > _this.showBox.offsetWidth - _this.coverBox.offsetWidth) {
                x = _this.showBox.offsetWidth - _this.coverBox.offsetWidth
            }
            if (y < 0) {
                y = 0
            }
            if (y > _this.showBox.offsetHeight - _this.coverBox.offsetHeight) {
                y = _this.showBox.offsetHeight - _this.coverBox.offsetHeight
            }
            // 覆盖层移动距离
            _this.coverBox.style.top = y + 'px'
            _this.coverBox.style.left = x + 'px'

            /**
             * !计算移动比例，从而计算出大图需要移动距离
             */

            // 放大镜的大小
            let glassBoxWidth = parseInt(window.getComputedStyle(_this.glassBox).width)
            let glassBoxHeight = parseInt(window.getComputedStyle(_this.glassBox).height)

            // 覆盖层的大小
            let coverBoxWidth = parseInt(window.getComputedStyle(_this.coverBox).width)
            let coverBoxHeight = parseInt(window.getComputedStyle(_this.coverBox).height)

            // 计算大图移动距离
            let bigImgX = x * glassBoxWidth / coverBoxWidth
            let bigImgY = y * glassBoxHeight / coverBoxHeight

            //移动大图
            _this.bigImg.style.top = -bigImgY + 'px'
            _this.bigImg.style.left = -bigImgX + 'px'
        })
    }
    /**
     * !选项卡
     *  * 1.鼠标移入发送改变，并同时清除所有选中效果
     *  * 2.给当前的选中图片设置选中效果
     *  * 3.切换显示图片和大图
     */
    onTab() {      
        for (let i = 0; i < this.liEle.length; i++) { 
            let _this = this 
            this.liEle[i].addEventListener('mouseover', function (){
                _this.onClear()
                this.classList.add('active')
                _this.showImg.setAttribute('src',`images/show_${i+1}.jpg`)
                _this.bigImg.setAttribute('src',`images/big_${i+1}.jpg`)         
            })
        }
    }
    onClear() {
        for (let i = 0; i < this.liEle.length; i++) {
            this.liEle[i].classList.remove('active')
        }
    }
}

一心就想回农村
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
电商网站商品放大镜功能、选项卡功能案例详解
ZHANGJIN9546的博客
06-25 745
电商网站商品放大镜功能、选项卡功能案例详解 实现功能 1、选择下标小图，图片显示区出现对应的图片 2、鼠标移入图片显示区时出现放大镜，放大部分出现在右侧 3、点击前进后退的按钮，可将更多的图片显示出来 效果展示 方法一：面向对象实现 <body> <div id="box" > <!--正常显示图片区域--> <div id="small"...
JS实现电商商品展示放大镜特效
10-15
主要为大家详细介绍了JS实现电商商品展示放大镜特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
某东商品详情页图片放大镜功能
热门推荐
就是不掉头发
09-04 39万+
首先看看某东的效果： 这个案例可以分为三个功能模块： 鼠标经过小图片的盒子，遮罩层和大图片盒子显示，离开隐藏遮罩层和大图片盒子。 遮罩层跟随鼠标移动。 移动遮罩层，大图片跟随移动。 要实现这个案例，我们需要用到下面几个知识点： 属性 作用 element.offsetTop 返回元素相对于带有定位父元素上边框的偏移量 element.offsetLeft 返回元素相对于带有定位父元素左边框的偏移量 element.offsetWidth 返回自身包括padding、边框、内容区
原生JS实现京东商城同步放大镜功能
鹏多多的博客
06-28 1518
嘻嘻嘻，今天分享一下使用原生JS实现京东购物的放大镜功能，也就是鼠标移动到左侧商品小图，在右侧出现大图，并且实现局部放大。 原效果：京东商城 第一步.搭建静态页面 html <div id="box1"> <img src="xiao.jpg"><!-- 小图 --> <span></span><!-- 鼠标移上去...
(一)vue实战——商品放大镜组件封装及效果实现
厉害哥哥的博客
10-09 1436
本节内容以vue为基础，实现一个商品放大镜组件的封装，及动画效果实现，通过本节内容，我们也可以实现其它h5相关的功能需求。商品放大镜功能在实际开发中还是有广泛需求的，尤其在商城项目中，为了更好的使用该功能，作者将该商品放大镜功能封装为一个组件，便于使用和维护。
京东商品的放大镜效果实现（html+css+js）
Learning_xzj的博客
07-09 5478
京东商品首页随便选择一个商品进入到商品详情页，商品放大镜就是如下图所示的效果： 从图中分析可得： （1）首先在鼠标放置在商品上的时候会出现一个黄色的透明遮罩层 （2）遮罩层会随着鼠标的移动一起移动，这里要注意遮罩层的移动范围在图片盒子内部 （3）当出现遮罩层的时候右边同时也会出现一个盒子，盒子里面是放大后的商品图 PS：看起来好像右边盒子里的图片是左边遮罩层所覆盖部分的放大—专业称为“放大镜”效果，但实际上这里是两张图片，一张小图片放在左边的盒子里，一张大图片放在右边的盒子里，遮罩层在左边盒子
js实现淘宝浏览商品放大镜功能
01-18
本文实例为大家分享了js实现淘宝浏览商品放大镜的具体代码，供大家参考，具体内容如下 1、准备两张图片，其中一张图片分辨率为另一张图片的二倍。 2、前端页面布局 //box1位左侧原图，box2为右侧放大图额显示框,...
phpweb商城页，图片放大镜功能
07-13
可实现PHPWEB系统 商品页面 图片放大镜功能 附有安装说明，安装前请注意备份
jquery图片放大镜imagezoom v1.0下载(原创)
03-11
kissy imagezoom:淘宝网的放大镜插件，由于基于kissy框架，普及率不是很高，适合于底层采用kissy的页面。 jquery magnify:把mousemove事件绑定在镜头上，稍微移动快了鼠标会脱离镜头，有明显BUG。 jquery ...
带购物车、订单、后台和数据库代码的ue网购系统php源码
11-28
能实现前台的登录注册 搜索 购物车 和订单功能 放大镜功能等 页面非常漂亮 后台可以实现对商品基本的增删改查分类管理 和管理员的管理 订单的操作 权限的分配等
商城放大镜效果
黄昏与四季的博客
10-16 137
要实现放大镜效果，我们首先要有一个大体的效果图，如上图所示，下面是思路分析： 页面加载完后就获取所要操作的节点对象（smallBox、tool、bigBox、bigImg等） 当鼠标浮动到小盒子上时，显示输出放大镜（tool）,显示出右边的大盒子。 在鼠标在小盒子上移动时，放大镜（tool）跟着鼠标移动（范围就是小盒子内）。右边的大盒子中的大图片也随之移动。 效果分析图 右部显示出来是放大的效果，那么右部的容器和小工具的大小比求出图片需要放大多少倍。其实这个原理就是小工具在左侧的小盒子上移动，然后图片按
商城物品展示的放大镜效果具体实现
zqh1999的博客
12-03 399
关于商城物品展示的放大镜效果具体实现起来并不困难，只要掌握了图片放大的具体思路将它转化成公式就可以轻松搞定。下面来谈谈具体实现思路。 在自己的html文件的<body>里边构建好自己的实现区域框架，设置css样式，大致效果如下 这是我调的大致效果至于鼠标事件等效果们在js中具体实现。 在这里我们把左侧被放大区域的块起名为header，右侧放大区域的块起名为show，放大区域选中块起名为hover。 一、重定向鼠标在展示图片区域的坐标 我们需要获取到鼠标在选中区域...
Html 页面 如何等比例缩小 放大
央顺科技官方博客
10-22 1万+
【代码】Html 页面 如何等比例缩小 放大。
html文字放大效果代码,HTML页面放大镜效果(示例代码)
weixin_39673704的博客
06-03 1182
HTML5网页放大效果.a {transition: All 0.4s ease-in-out;-webkit-transition: All 0.4s ease-in-out;-moz-transition: All 0.4s ease-in-out;-o-transition: All 0.4s ease-in-out;width: 200px;height: 200px;display: b...
商品详情页商品放大镜效果
前端小白成长记
07-11 3698
源码下载地址：https://gitee.com/meijunna/lunbohtml&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3...
原生js实现商品放大镜功能
VCLife
05-23 336
商品放大镜功能实现
商品的放大镜功能
weixin_43734545的博客
08-04 143
商品的放大镜功能 废话不多说，先看css样式 <style> * { margin: 0; padding: 0; } .box { position: absolute; top: 30px; left: 50px; width: 300px; height: 300px; overflow: hidden; } .box img { width: 100%; height: 100%
利用前端实现淘宝浏览商品放大镜的功能
h03580的博客
12-04 864
1、准备两张图片，其中一张图片分辨率为另一张图片的二倍。如下图： 2、前端页面布局 //box1位左侧原图，box2为右侧放大图额显示框,son为iv class=&quot;box1&quot;&amp;gt; &amp;lt;div class=&quot;son&quot;&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;div class=&quot;ceng&q
vue2放大镜功能实现
最新发布
08-10
要实现Vue 2的放大镜功能，你可以按照以下步骤进行操作： 1. 首先，确保你已经在项目中引入了Vue 2。 2. 在需要使用放大镜功能的组件中，定义一个data属性用于存储放大镜的状态，例如： ```javascript data() { return { zoomed: false, // 放大镜状态，默认为false mouseX: 0, // 鼠标X轴坐标 mouseY: 0, // 鼠标Y轴坐标 zoomX: 0, // 放大镜X轴坐标 zoomY: 0, // 放大镜Y轴坐标 } }, ``` 3. 在模板中，使用`v-on`指令监听鼠标移动事件，并更新鼠标坐标： ```html <template> <div @mousemove="updateMousePosition"> <!-- 图片展示区域 --> <div class="image-container"> <img src="path/to/image.jpg" alt="Image"> </div> <!-- 放大镜区域 --> <div v-if="zoomed" class="zoom-container" :style="{ left: zoomX + 'px', top: zoomY + 'px' }"> <img src="path/to/image.jpg" alt="Zoomed Image"> </div> </div> </template> ``` 4. 在方法中，实现更新鼠标坐标和放大镜位置的逻辑： ```javascript methods: { updateMousePosition(event) { this.mouseX = event.clientX; this.mouseY = event.clientY; this.updateZoomPosition(); }, updateZoomPosition() { const container = document.querySelector('.image-container'); const zoomContainer = document.querySelector('.zoom-container'); if (container && zoomContainer) { const containerRect = container.getBoundingClientRect(); const zoomContainerRect = zoomContainer.getBoundingClientRect(); // 根据鼠标坐标和图片容器位置计算放大镜位置 this.zoomX = this.mouseX - containerRect.left - zoomContainerRect.width / 2; this.zoomY = this.mouseY - containerRect.top - zoomContainerRect.height / 2; // 限制放大镜位置在图片容器内部 this.zoomX = Math.max(0, Math.min(this.zoomX, containerRect.width - zoomContainerRect.width)); this.zoomY = Math.max(0, Math.min(this.zoomY, containerRect.height - zoomContainerRect.height)); } } } ``` 5. 最后，添加一些CSS样式来定义图片容器和放大镜的样式： ```css .image-container { position: relative; } .zoom-container { position: absolute; width: 200px; /* 自定义放大镜的宽度 */ height: 200px; /* 自定义放大镜的高度 */ border: 1px solid #ccc; pointer-events: none; /* 防止放大镜影响鼠标事件 */ } ``` 这样，你就可以在Vue 2中实现一个简单的放大镜功能了。当鼠标在图片上移动时，会显示一个放大的镜头，跟随鼠标移动并显示放大的图像。根据需要，你可以自定义放大镜的样式和放大倍数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一心就想回农村

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值