【原生JS】简单放大镜效果

最新推荐文章于 2024-05-13 02:16:46 发布
最新推荐文章于 2024-05-13 02:16:46 发布
阅读量2.9k 收藏 3
点赞数 3
分类专栏： 小工具 文章标签： javascript

这里写图片描述

演示地址：点我

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            img{
                vertical-align: top;
            }
            .fdj {
                width: 350px;
                height: 350px;
                position: relative;
                margin: 100px auto;
                border: 1px solid gainsboro;
            }
            .small {
                position: relative;
            }
            .small img {
                width: 350px;
            }
            .mask {
                width: 100px;
                height: 100px;
                background: rgba(255, 255, 0, 0.4);
                position: absolute;
                left: 0;
                top: 0;
                cursor: move;
                display: none;
            }
            .big {
                position: absolute;
                top: 0;
                left: 360px;
                width: 500px;
                height: 500px;
                border: 1px solid gainsboro;
                overflow: hidden;
                display: none;
            }
            .big img{
                position: absolute;
                left: 0;
                top: 0;
            }
        </style>
    </head>

    <body>
        <div class="fdj">
            <div class="small">
                <img src="http://cdn.attach.qdfuns.com/notes/pics/201702/08/162503mw0fawb5b02va22i.jpg" />
                <div class="mask"></div>
            </div>
            <div class="big">
                <img src="http://cdn.attach.qdfuns.com/notes/pics/201702/08/162503mw0fawb5b02va22i.jpg" />
            </div>
        </div>
    </body>
    <script type="text/javascript">
        var fdj = document.querySelector('.fdj') // 获得最大的盒子
        var small = document.querySelector('.small'); //获取小图片盒子
        var big = document.querySelector('.big'); //获取大图片盒子
        var bigs = big.children[0] //大图片 
        var smalls = small.children[0] //小图片
        var mask = small.children[1]; //遮罩 

        //鼠标移入小图片盒子
        small.onmouseover = function() {
            //鼠标移入图片盒子将遮罩与大图片显示
            mask.style.display = 'block';
            big.style.display = ' block';
        };

        //鼠标移出小图片盒子
        small.onmouseout = function() {
            //鼠标移出小图片盒子将遮罩与大图片隐藏
            mask.style.display = 'none';
            big.style.display = 'none';
        };

        var x=0;
        var y=0;
        //鼠标在小图片上移动时
        small.onmousemove = function(ev) {
            var ev = event || window.event;
        //让鼠标在遮罩正中
            //鼠标X坐标与Y坐标
            x = ev.clientX -this.offsetParent.offsetLeft- mask.offsetWidth / 2 ;  
            y = ev.clientY -this.offsetParent.offsetTop- mask.offsetHeight / 2 ;
            //将遮罩限制在小图片盒子中

            if (x<0) {
                x=0;
            }else if(x>small.offsetWidth-mask.offsetWidth){
                x = small.offsetWidth-mask.offsetWidth;
            }

            if(y<0){
                y=0;
            }else if(y>small.offsetHeight-mask.offsetHeight){
                y= small.offsetHeight-mask.offsetHeight
            }
            mask.style.left = x + 'px';
            mask.style.top = y + 'px';

            //大图与小图的比例

            /*var scalX = bigs.offsetWidth/small.offsetWidth;
            var scalY = bigs.offsetHeight/small.offsetHeight;*/

            var scalX = x/(small.offsetWidth-mask.offsetWidth);
            var scalY = y/(small.offsetHeight-mask.offsetHeight);

            bigs.style.left = -(x*scalX)+'px';
            bigs.style.top = -(y*scalY)+'px';

        };

    </script>

</html>
邹大叔
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+CSS+JavaScript实现放大镜效果
apple_54470279的博客
04-29 3220
首先，需要获取操作的对象：图片展示框（鼠标移入事件）；放大镜（显示和跟随鼠标）；放大镜中的图片（改变位置）；给图片展示框添加事件监听器，鼠标移入图片展示框时，显示放大镜。鼠标在图片展示框中移动时的事件监听器。接下来实现放大镜跟随鼠标移动......
JavaScript基础 - 经典案例4 -放大镜 (含公式)
never_stop_study的博客
10-06 1039
JavaScript基础 - 经典案例4 -放大镜 (含公式)
2024年前端最全用JavaScript实现淘宝放大镜的效果，附源码，三年老前端经验面经
最新发布
2401_84620100的博客
05-13 1071
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】就可以了。
js+html2canvas实现网页放大镜效果：放大镜图片使用css样式background背景图，鼠标移动使用样式background-position动态设置
Hi_MrXiao的博客
08-31 2067
鼠标移动到需要放大的网页上时，鼠标静止不动500毫秒后，一个长方形的放大镜框显示，放大镜中显示当前区域2.2倍的效果，并且这时候鼠标移动放大的区域也跟着变化。放大镜限制：放大镜只能在特定的区域内使用，即放大镜的移动范围有边界。
JavaScript网页特效——放大镜(1+X Web前端开发初级 例题)
黛琳ghz的博客，期待你的关注。
03-27 3375
JavaScript网页特效——放大镜(1+X Web前端开发 例题)
js实现放大镜效果
adminsir0的博客
08-17 522
js，放大镜，效果，放大效果，js特效，案例
原生js实现放大镜效果
10-20
本文主要分享了原生js封装实现放大镜效果的示例代码，具有一定的参考价值，下面跟着小编一起来看下吧
原生JS实现简单放大镜效果
10-20
主要为大家详细介绍了原生JS实现简单放大镜效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生js实现淘宝放大镜效果
10-17
在本文中，我们将探讨如何使用原生JavaScript实现淘宝放大镜效果。这种效果是电商网站中常见的一种图片展示功能，它可以为用户提供更清晰的商品细节视图。以下是对实现该效果所需的关键知识点的详细解释： 1. **CSS...
JavaScript实现放大镜效果代码示例
10-15
JavaScript实现的放大镜效果是一种常见的网页交互功能，它允许用户在鼠标悬停在小图上时，通过一个浮动的放大窗口预览图像的细节。这种效果常见于电子商务网站的产品图片展示，增强了用户体验，使得用户无需点击就能...
原生javascript实现图片放大镜效果
10-20
主要为大家详细介绍了原生javascript实现图片放大镜效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生js实现图片放大镜效果
03-30
原生js实现图片放大镜效果，经典案例，注释详细，源于分享
html中图片放大镜效果图,HTML5使用不同精度的图片来实现图像放大镜效果
weixin_32596893的博客
06-03 351
CSS语言：CSSSCSS确定body {background-color: #212119;margin: 0;}#selector {border: 5px solid #aaa;padding: 3px 10px;margin-right: 20px;margin-top: 20px;position: absolute;right: 0;z-index: 100;-moz-border-r...
原生JS实现放大镜特效
越陌度阡
07-27 535
分享一个用原生JS实现的放大镜效果，效果如下： 代码如下： <!doctype html> <html> <head> <meta charset="UTF-8"> <title>原生JS实现放大镜特效</title> <style> * { .........
用原生js实现淘宝详情页图片放大镜效果
热门推荐
Coffee_noSugar的博客
03-03 1万+
这个功能是我在模仿淘宝详情页的时候做出来的，最初版本对于非1:1比例的图片没有做处理，后续对程序进行了完善和逻辑上修改，形成了当前的程序。废话不多说，直接进入正题了，先上个效果图先放上这段功能的html代码&lt;div id="full-pic"&gt;     &lt;img src="img/full-pic-1.jpg" alt=""&gt;     &lt;span id="pic-sp.
js实现淘宝放大镜效果
YZi_Angel的专栏
08-25 1万+
记得很久以前，小编就准备写个放大镜，但是种种原因导致，一直没有完成这个愿望，下面，让我们一起来实现这个常见的功能吧。 不懂的同学，可能认为这很难细实现，觉得它很博大精深的样子，其实真了解他了，你会发现原来这么简单，下面废话不多说，让我们一起来实现它吧。 首先当然是html布局和css样式： ![效果图](http://img.blog.csdn.net/20160825213
js实现放大镜
weixin_52412707的博客
04-20 398
完整版的html,css,js代码如下: <!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"&gt
html中放大镜案列,Canvas实现放大镜效果完整案例分析(附代码)
weixin_28842367的博客
06-15 432
本文主要记录 canvas 在图像、文字处理、离屏技术和放大镜特效的实现过程中使用到的api。先看下效果吧：一张模糊的图片：鼠标点击任意位置，产生放大效果：哇塞~ 一个帅哥，哈哈哈哈~1、放大镜原理实现效果：如上图，点击或点击滑动鼠标显示一个区域，区域中显示对应点击部分范围的放大清晰图片。那么问题就可以肢解为3部分：1、如何在canvas(模糊图)上再画出另外一个canvas(清晰放大图)；2、如...
用原生js写个放大镜功能
03-22
好的，以下是一个简单的原生JS实现放大镜功能的代码： HTML： ``` <div class="container"> <img src="image.jpg" alt="product image" id="product-image"> <div class="magnifier"></div> </div> ``` CSS： ``` .container { position: relative; } .magnifier { position: absolute; width: 200px; height: 200px; border: 1px solid #ccc; display: none; pointer-events: none; background-repeat: no-repeat; background-size: 400px 400px; background-position: 0 0; } ``` JS： ``` const container = document.querySelector('.container'); const magnifier = document.querySelector('.magnifier'); const productImage = document.querySelector('#product-image'); container.addEventListener('mousemove', e => { const containerRect = container.getBoundingClientRect(); const x = e.clientX - containerRect.left; const y = e.clientY - containerRect.top; const magnifierSize = 200; const imageWidth = productImage.width; const imageHeight = productImage.height; const ratioX = imageWidth / containerRect.width; const ratioY = imageHeight / containerRect.height; const bgPosX = -x * ratioX + magnifierSize / 2; const bgPosY = -y * ratioY + magnifierSize / 2; magnifier.style.display = 'block'; magnifier.style.left = `${x - magnifierSize / 2}px`; magnifier.style.top = `${y - magnifierSize / 2}px`; magnifier.style.backgroundImage = `url(${productImage.src})`; magnifier.style.backgroundPosition = `${bgPosX}px ${bgPosY}px`; }); container.addEventListener('mouseleave', () => { magnifier.style.display = 'none'; }); ``` 这段代码会在鼠标移动到图片上时，显示一个放大镜，并在放大镜内显示鼠标所在位置的图片放大后的部分。当鼠标移开图片时，放大镜会隐藏。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值