实现网页图片的放大镜效果

深藏阁楼爱情的钟 2023-07-10 14:17 143阅读 0赞

实现某东上面的商品放大镜效果  
![在这里插入图片描述][20200303100145399.gif]

--------------------

# ***实现代码*** #

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{                                           //清除浏览器原带的格式
                    margin: 0;
                    padding: 0;
                }
                #content{ 
                    width: 800px;
                    height: 800px;
                    margin: 0 auto;
                    border: 1px green solid;
                    font-size: 12px;
                }
                #box{ 
                    width: 200px;
                    height: 60px;
                    position: relative;                     /*整个大盒子，并设定相对定位好移动盒子内部的图片*/
                }
                #b4{ 
                    width: 160px;                           /*注意b1，b2，b3，b4盒子的大小必须注意他们的比例*/
                    height: 160px;                          /*b4大小是b1的4倍*/
                    overflow: hidden;
                    border: 1px black solid;
                    display: none;                          /*开始时这个盒子是隐藏的*/
                    position: relative;                     /*设定定位，利于b3移动*/
                }
                #b1{ 
                    display: none;                          /*开始时这个盒子是隐藏的*/
                    position: absolute;                     /*设定定位，利于b1移动*/
                    width: 40px;                            /*设定盒子的大小*/
                    height: 40px;
                    background-color: rgba(150,150,150,0.3);
                    cursor:move;                            /*改变鼠标光标样式*/
                }
                #b2{ 
                    width: 100%;                            /*设定盒子的大小，为继承父标签大小，宽200px，高60px*/
                    height:100%;
                }
                #b3{ 
                    position:absolute;                      /*设定定位，利于b3移动*/
                    width: 800px;                           /*大小为b2的4倍*/
                    height: 240px;
                }
            </style> <script type="text/javascript" defer=""> window.addEventListener('load',function () { 
                    var box=document.querySelector('#box');
                    var b4=document.querySelector('#b4'); box.addEventListener('mouseover',function () {           //鼠标移动到box上面的时候b1和b4显示
                        box.children[0].style.display='block';
                        b4.style.display='block';
                    }); box.addEventListener('mouseout',function () {            //鼠标移出box的时候b1和b4隐藏
                        box.children[0].style.display='none';
                        b4.style.display='none';
                    }); box.addEventListener('mousemove',function (e) { 
                        var x=e.pageX-box.offsetLeft-box.children[0].offsetWidth/2;
                        var y=e.pageY-box.offsetTop-box.children[0].offsetHeight/2;
    
                        /* *这里的x，y都是相对与box的left和top * x=鼠标到网页左边框距离 - box的左边框到网页左边框距离 - b1宽的一半 * y=鼠标到网页上边框距离 - box的上边框到网页上边框距离 - b1高的一半 * 那么为什么要减去b1的宽一半或者高一半呢？ * 因为盒子开始定位的时候鼠标在盒子的左上角，而需要鼠标定位到盒子中间，所以需要这样 */
    
                        var xBig=box.children[1].offsetWidth-box.children[0].offsetWidth; if(x<=0){ 
                            x=0;
                        }
                        else if(x >= xBig){ 
                            x=xBig;
                        }
                        if(y<=0){                //顶顶顶
                            y=0;
                        }
                        else if(y >= box.children[1].offsetHeight-box.children[0].offsetHeight){ 
                            y=box.children[1].offsetHeight-box.children[0].offsetHeight;
                        }
    
                        /* * xBig（鼠标在x方向的最大移动距离）=b2的宽度 - b1的宽度 * x值不能小于0，当x小于0的时候，令x=0 * x值不能大于xBig，当x大于xBig的时候，令x=xBig * y也是同理 */
    
                        box.children[0].style.left=x+'px';                  //给b1设定定位
                        box.children[0].style.top=y+'px';
                        var xMBig=b4.firstElementChild.offsetWidth-b4.offsetWidth;
                        b4.firstElementChild.style.left=-x*xMBig/xBig+'px';     //给b3设定定位
                        b4.firstElementChild.style.top=-y*xMBig/xBig+'px';
    
                        /* * 因为b1，b2，b3，b4大小是相关的 * 所以b1在b2里面移动的x，y距离与b3在b4里面移动的距离有一定的倍数关系 * xMBig是b3在b4里面的最大移动距离 * 也要注意b3定位的ldft和top一定是负的 */
    
                    });
                })
            </script>
        </head>
        <body>
            <div id="content">
                <div id="box">
                    <div id="b1"></div>
                    <img src="../images/image07.jpg" alt="" id="b2" title=""/>
                    <div id="b4"><img src="../images/image07.jpg" id="b3" alt=""/></div>
                </div>
            </div>
        </body>
    </html>

## 效果图： ##

![在这里插入图片描述][20200303125747733.gif]  
本文只用于个人学习和纪录

[20200303100145399.gif]: https://img-blog.csdnimg.cn/20200303100145399.gif
[20200303125747733.gif]: https://img-blog.csdnimg.cn/20200303125747733.gif

发表评论取消回复

表情：

评论列表（有 0 条评论，143人围观）

还没有评论，来说两句吧...

相关阅读

相关原生js实现放大镜效果

今天是中秋佳节，在这了我祝大家中秋快乐，心想事成，工作顺利哈！放大镜效果在电商网站上较为常见的一个效果，主要针对鼠标在图片选取部分放大查看。效果如图所示 ![...

痛定思痛。/ 2024年04月18日 23:23/ 0 赞/ 200 阅读

相关实现网页图片的放大镜效果

实现某东上面的商品放大镜效果 ![在这里插入图片描述][20200303100145399.gif] -------------------- 实现代码

深藏阁楼爱情的钟/ 2023年07月10日 14:17/ 0 赞/ 144 阅读

相关 js实现放大镜效果

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>

男娘i/ 2023年07月08日 08:00/ 0 赞/ 141 阅读

相关商品图片放大镜效果

京东商品页面中的放大镜效果实现技术：：html+ css + js 效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_1

深藏阁楼爱情的钟/ 2023年07月03日 12:03/ 0 赞/ 63 阅读

相关 js实现图片放大镜效果——简单方法

之前写过一篇关于电商项目商品详情页面的图片放大镜效果：[电商项目商品详情页的图片放大效果实现：https://blog.csdn.net/yehaocheng520/artic

女爷i/ 2022年08月29日 05:45/ 0 赞/ 371 阅读

相关实现放大镜效果

1、布局文件 <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http:

╰半夏微凉°/ 2022年08月19日 12:16/ 0 赞/ 401 阅读

相关 jQuery实现放大镜效果

1.1.1 摘要相信大家都见过或使用过放大镜效果，甚至实现过该效果，它一般应用于放大查看商品图片，一些电商网站（例如：凡客，京东商城，阿里巴巴等）都有类似

超、凢脫俗/ 2022年06月07日 02:35/ 0 赞/ 412 阅读

相关 Android——图片放大镜效果

Android——图片放大镜效果前言：使用两种方法实现图片放大镜效果，随着手在屏幕上的移动来放大相应位置的图片。布局文件： <?xml version="

骑猪看日落/ 2022年06月06日 05:19/ 0 赞/ 556 阅读

相关使用jqzoom插件实现图片放大镜效果

jqzoom插件实现图片放大镜效果。 ![1333548315_2346.png][] 图1.1jqzoom插件实现图片放大镜效果 1、引入jqurty和jqzoo

一时失言乱红尘/ 2021年09月12日 08:42/ 0 赞/ 829 阅读

相关 js技能提升——原生js实现图片放大镜效果

js技能提升鉴于我的工作经验较少，为了能够早日实现自己成为前端大佬的目标，也为了更好的工作，因此开始js技能的训练。之前的半年多的时间一直在做uniapp和ele

淡淡的烟草味﹌/ 2021年07月25日 16:19/ 0 赞/ 640 阅读