放大镜效果实现

最新推荐文章于 2021-09-16 23:58:15 发布
最新推荐文章于 2021-09-16 23:58:15 发布
阅读量393 收藏 5
点赞数 5
文章标签： javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54572778/article/details/115053688
版权

一.先将HTMLCSS部分写好

（不要纠结这里写的好坏，每个人的习惯不同，能写出来想要的效果，自己写的代码自己首先得能看得懂）

    <style>
        .box1 {
            width: 350px;
            height: 350px;
            position: relative;
            border: 1px solid #ccc;
        }
        
        .small {
            width: 350px;
            height: 350px;
            position: relative;
        }
        
        .big {
            width: 480px;
            height: 480px;
            position: relative;
            position: absolute;
            top: 0;
            right: -480px;
            display: none;
            overflow: hidden;
        }
        
        .imgbig {
            position: absolute;
            top: 0;
            right: 0;
        }
        
        .zhezhao {
            width: 210px;
            height: 210px;
            position: absolute;
            top: 0;
            left: 0;
            background-color: #ff0;
            opacity: .3;
            cursor: move;
            display: none;
        }
    </style>
    <body>
    <div class="box1">
        <div class="small">
            <img src="./small.jpg" alt="" class="imgsmall">
            <div class="zhezhao"></div>
        </div>
        <div class="big">
            <img src="./big.jpg" alt="" class="imgbig">
        </div>
    </div>
</body>

效果图:
在这里插入图片描述



二.JS部分

1.先将需要操作的元素找到

        // 大盒子
        let big = document.querySelector('.big')
            // 小盒子
        let small = document.querySelector('.small')
            // 遮罩层
        let shade = document.querySelector('.zhezhao')
            // 大图片
        let imgbig = document.querySelector('.imgbig')

2.鼠标经过小盒子让大盒子和遮罩层显示
因为放大镜默认鼠标不经过小盒子，大图片和遮罩层是隐藏的，所以在css样式中已经用display:none先将他们隐藏，只有鼠标经过小盒子时的时候，在让他们显示

  small.onmouseenter = function() {
            big.style.display = 'block'
            shade.style.display = 'block'
        }

3.在onmouseenter内在嵌套一个onmousemove鼠标移动事件

计算出遮罩层移动的距离，创建两个变量接收遮罩层X轴与Y轴移动的距离

a为事件触发对象，onmousemove为鼠标移动事件，所以这里a就代表鼠标
a.pageX为鼠标在X轴移动的距离，.scrollWidth为遮罩层宽度

a.pageX -shade.scrollWidth/2(因为图片宽高一致，所以这里写Width或者Height都可以) 除以二是为了让鼠标刚好在遮罩层中间,得到遮罩层移动的距离

    small.onmousemove = function(a) {
                let left = a.pageX - shade.scrollWidth / 2
                let top = a.pageY - shade.scrollHeight / 2

            }

4.判断移动距离是否超出small

这里做一下判断 因为如果鼠标移动的距离过短或过长，就会导致遮罩层溢出盒子 如果算出来的距离小于0 也就是盒子的左边界就让遮罩层的移动距离等于0 也就是不能移出边界外 ，同理如果移动过大会导致右边溢出，所以这里在做一下判断，先算出遮罩层最大移动距离 遮罩层最大移动距离为盒子的宽度减去遮罩层的宽度 如果移动的距离大于这个距离 就让它等于最大距离

                if (left < 0) {
                    left = 0
                } else if (left > small.scrollWidth - shade.scrollWidth) {
                    left = small.scrollWidth - shade.scrollWidth
                }
                if (top < 0) {
                    top = 0
                } else if (top > small.scrollWidth - shade.scrollWidth) {
                    top = small.scrollWidth - shade.scrollWidth
                }

5.将最终的值赋给遮罩层
这里别忘了加px 这里是将值赋给样式里，所以要加单位

shade.style.left = left + 'px'
 shade.style.top = top + 'px'

6.接下来算大图移动的距离，先算出大图与小图的比例

let bili = small.scrollWidth / big.scrollWidth

7.算出大图移动的距离并赋给大图
因为大图与小图移动的距离相反所以这里别忘了加- 求负值
最后在将得到的值赋给大图相对应的left和top就行了

                imgbig.style.left = -left / bili + 'px'
                imgbig.style.top = -top / bili + 'px'

8.最后在让鼠标划出时让遮罩层和大图隐藏就可以了

     small.onmouseout = function() {
            shade.style.display = 'none'
            big.style.display = 'none'
        }

所有代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../2.CSS/reset.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 350px;
            height: 350px;
            position: relative;
            border: 1px solid #ccc;
        }
        
        .small {
            width: 350px;
            height: 350px;
            position: relative;
        }
        
        .big {
            width: 480px;
            height: 480px;
            position: relative;
            position: absolute;
            top: 0;
            right: -480px;
            display: none;
            overflow: hidden;
        }
        
        .imgbig {
            position: absolute;
            top: 0;
            right: 0;
        }
        
        .zhezhao {
            width: 210px;
            height: 210px;
            position: absolute;
            top: 0;
            left: 0;
            background-color: #ff0;
            opacity: .3;
            cursor: move;
            display: none;
        }
    </style>


</head>

<body>
    <div class="box1">
        <div class="small">
            <img src="./small.jpg" alt="" class="imgsmall">
            <div class="zhezhao"></div>
        </div>
        <div class="big">
            <img src="./big.jpg" alt="" class="imgbig">
        </div>
    </div>
    <script>
        // 大盒子
        let big = document.querySelector('.big')
            // 小盒子
        let small = document.querySelector('.small')
            // 遮罩层
        let shade = document.querySelector('.zhezhao')
            // 大图片
        let imgbig = document.querySelector('.imgbig')
        small.onmouseover = function() {
            shade.style.display = 'block'
            big.style.display = 'block'
            small.onmousemove = function(a) {
                let left = a.pageX - shade.scrollWidth / 2
                let top = a.pageY - shade.scrollHeight / 2
                if (left < 0) {
                    left = 0
                } else if (left > small.scrollWidth - shade.scrollWidth) {
                    left = small.scrollWidth - shade.scrollWidth
                }
                if (top < 0) {
                    top = 0
                } else if (top > small.scrollWidth - shade.scrollWidth) {
                    top = small.scrollWidth - shade.scrollWidth
                }
                shade.style.left = left + 'px'
                shade.style.top = top + 'px'
                let bili = small.scrollWidth / big.scrollWidth
                imgbig.style.left = -left / bili + 'px'
                imgbig.style.top = -top / bili + 'px'
            }
        }
        small.onmouseout = function() {
            shade.style.display = 'none'
            big.style.display = 'none'
        }
    </script>
</body>

</html>

在这里插入图片描述

阎涛0329
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
前端放大镜功能实现
exxes的博客
01-20 348
先说思路，和裁剪的差不多，都是监听鼠标的坐标，放大效果无非就是裁剪出一个较小的区域然后给他一个正常的宽高，比如你的放大镜宽高都是100，要放大2倍，那么放大的区域就是以鼠标坐标为中心宽高是50的区域，把他放到100的框里面。这个功能相比前一篇的图片裁剪还是比较简单的，至少我这里的代码量只有三分之一，同样也要使用到drawImage这个方法，不熟悉的同学可以先去看一下上一篇介绍图片裁剪的，里面有说明。今天和大家分享一下放大镜的实现，同样也要使用到canvas，不了解的同学可以先去学习一下。
DOM 事件流与事件委托
qq_34870529的博客
10-08 83
<!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>D.
js放大镜效果
x94410891的博客
11-01 231
放大镜 实现原理：使用2个div，里面分别放大图片和小图片,大div超出隐藏, 控制大div超出隐藏滚动条的距离=小方块的宽高*倍数 实现放大,主要根据小图大图同比例缩放实现,有很多种方式 效果 1.html <!-- 小div --> <div id='box1'> <!-- 小图 --> <img src="1.jpg" id='pic'> <!-- 小方块 --> <div id
放大镜代码及效果图
weixin_30657999的博客
05-20 224
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>放大镜</title> <script type="text/javascript" src="js/jquery-1.9.1.mi...
jQuery实现放大镜效果
02-03
相信大家都见过或使用过放大镜效果，甚至实现过该效果，它一般应用于放大查看商品图片，一些电商网站（例如：凡客，京东商城，阿里巴巴等）都有类似的图片查看效果。在接下来的博文中，我们将向大家介绍通过jQuery...
Flex 放大镜效果实现代码
10-29
Flex 放大镜效果实现代码
JavaScript图像放大镜效果实现方法详解
10-15
通过以上步骤，我们可以实现一个简单的JavaScript图像放大镜效果。然而，实际应用中可能还需要考虑其他因素，如平滑过渡、边界处理、鼠标滚轮缩放等。理解基础原理后，可以根据需求进行定制和优化，以达到最佳用户...
JavaScript实现放大镜效果代码示例
10-15
JavaScript实现的放大镜效果是一种常见的网页交互功能，它允许用户在鼠标悬停在小图上时，通过一个浮动的放大窗口预览图像的细节。这种效果常见于电子商务网站的产品图片展示，增强了用户体验，使得用户无需点击就能...
jquery写的两种放大镜小案例
webEmmet
11-05 3593
很多同学在学习之初，都会用到放大镜的效果，这里用jquery写了两种放大镜效果，希望对学习的同学有所帮助。
实现图片局部放大_放大镜效果
qtvb1987的专栏
07-14 7133
<br /><!DOCTYPEhtmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gb23
js放大镜特效
king_show_的博客
11-04 3791
js原生放大镜 body体里的代码 <div class="left"> //左边的大div <img src="./images/dali.jpg" width="100%" height="100%"> <div class="mask"></div> //放大镜的小块 </div> <div class="right"> //右边的大div <img src="./images/dali.jpg">
JS 放大镜（淘宝商品放大镜）的实现
大桶爆米花eee
04-26 4865
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;
利用js写出的放大镜效果
stphencurry的博客
10-16 324
利用JavaScript写出放大镜效果 在一些购物网站上购买一些物品时可以对物品进行放大观看物品，提高用户体验，那么接下来就谈一下如何利用js写出放大镜的效果 首先理清思路，当鼠标移动到晓得图片中，就会出现放大镜效果，随着鼠标的移动，放大镜中的图片也随之移动，所以有三种鼠标事件 onmouseover（鼠标滑过）、 onmouseout（鼠标离开）和onmousemove（鼠标移动） 当鼠标滑过时，放大镜效果出现，当鼠标离开时，放大镜效果消失 html <div class="preview_wrap
放大镜效果的实现
weixin_41897680的博客
09-16 769
前言 最近在网上发现了一个放大镜效果，感觉很有意思。最终在b站找到了实现的教程。教程作者 xiao-high 教程链接点此查看 视频教程是基于html、css、js进行制作的。代码是我跟着教程手敲的。后期我会更新vue版和react版。 效果图 原生版 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compat
仿淘宝商品放大展示效果制作（放大镜效果）
asd18293347341的博客
03-16 1762
如果您觉得这篇文章有用，欢迎点赞收藏或有什么建议请在评论区留言，我看到后会第一时间回复的，谢谢！ （分享时刻） mac上取色比较好用的小工具：啜色； 好用的截屏小工具：Snipaste （常用的一个功能是可以将截图放在其他页面的顶部，尤其是在写css结构时非常方便） 接上篇玩转网页倒计时 通过这篇文章，大家可以了解到： ① 怎么制作放大效果的案例 ② 怎样将鼠标置于方框的中心 ③ 计算元素移动过程中的相对位置以及两个移动元素之间的数学关系 无人能阻挡我shopping的热情，尤其是在期盼已久的新品上架
JavaScript案例——红绿灯
s_meng_的博客
06-15 2515
前言： 大概快2周没写博客了，今天来更一下吧，今天更新的是一个小案例。 今天在腾讯云申请了一个免费的服务器，然后域名正在购买中，接下来 我会把我自己做的一些小案例放在上边，欢迎大家来测试，然后提出修改意见。 如果有大佬做项目愿意带我的也可以通过主页或者私信联系我，如果你和我一样是 初学者，想找人一起做项目的，也可以找我。 如果你是学生，自己的网页设计作业不想写，也可以找我，我可以代写， 当然，这个代写是有偿的，一方面我想锻炼自己的技术，另一方面也能赚点零花钱。 原理： 这个案例是我有天晚上睡不着，然
如何实现图片放大镜效果
最新发布
03-31
1.第一种方法：使用CSS实现 步骤： ... 2) 在CSS中设置图片的宽度和高度，并设置放大镜的宽度和高度 3) 设置放大镜的样式，包括背景颜色、边框、...5) 当鼠标移到放大镜上时，隐藏原始图片，只显示放大镜中的放大部分

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值