实现放大镜功能

最新推荐文章于 2022-09-17 15:28:29 发布
最新推荐文章于 2022-09-17 15:28:29 发布
阅读量139 收藏
点赞数
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46693274/article/details/112853089
版权

js实现放大镜功能

简单放大镜

简单放大镜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>放大镜</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            width: 801px;
            height: 100%;
            display: flex;
            margin: 20px auto;
            border: 1px solid black;
        }
        .left{
            width: 400px;
            border-right: 1px solid black;
        }
        .top{
            height: 300px;
            position: relative;
        }
        .shadow{
            width: 200px;
            height: 200px;
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
            z-index: 1;
            display: none;
        }
        .pic_img img{
            position: absolute;
            display: none;
        }
        .pic_img .show{
            display: block;
        }
        .bottom{
            display: flex;
        }
        .right{
            width: 400px;
            height: 300px;
            overflow: hidden;
            position: relative;
            display: none;
        }
        .right img{
            height: 600px;
            width: 800px;
            position: absolute;
            display: none;
        }
        .right .show{
            display: block;
        }

    </style>
</head>
<body>
    <div id="container">
        <div class="left">
            <div class="top">
                <div class="shadow"></div>
                <div class="pic_img">
                    <img class="show" src="./motoImg/1.jpg" alt="">
                </div>
            </div>
        </div>
        <div class="right">
            <img class="show" src="./motoImg/1.jpg" alt="">
        </div>
    </div>
</body>
<script>
    function $(ele){return document.querySelector(ele)};
    var pic_img = document.querySelector(".pic_img img");
    var right_img = document.querySelector(".right img");

    $(".top").onmouseover = function(e){
        $(".shadow").style.display = "block";
        $(".right").style.display = "block";
        document.onmousemove = function(ev){
            var x = ev.clientX - $("#container").offsetLeft - 100;
            var y = ev.clientY - $("#container").offsetTop - 100;
            x = x > 200 ? 200 : x;
            x = x < 0 ? 0 : x;
            y = y > 100 ? 100 : y;
            y = y < 0 ? 0 : y;

            $(".shadow").style.left = x + "px";
            $(".shadow").style.top = y + "px";
            right_img.style.left = -(x * 2) + "px";
            right_img.style.top = -(y * 2) + "px";
            
        }
    }
    $(".top").onmouseout = function(e){
        $(".shadow").style.display = "none";
        $(".right").style.display = "none";
    }
</script>
</html>
带tab选项卡的放大镜
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            width: 801px;
            margin: 20px auto;
            border: 1px solid black;
            display: flex;
        }
        .left{
            width: 400px;
            border-right: 1px solid black;
        }
        .top{
            height: 400px;
            position: relative;
        }
        .shadow{
            width: 200px;
            height: 200px;
            z-index: 1;
            display: none;
            position: absolute;
            background-color: rgba(0, 0, 0, 0.5);
        }
        .pic_img img{
            width: 400px;
            height: 400px;
            position: absolute;
            display: none;
        } 
        .pic_img .show{
            display: block;
        }
        .bottom{
            width: 400px;
            display: flex;
        }
        .bottom .ctrl{
            width: 80px;
            height: 80px;
            border: 5px solid #fff;
            background-image: url(./motoImg/1.webp);
            background-size: 100% 100%;
        }
        .bottom .ctrl:nth-of-type(2){
            background-image: url(./motoImg/2.webp);
        }
        .bottom .ctrl:nth-of-type(3){
            background-image: url(./motoImg/3.webp);
        }
        .bottom .ctrl:nth-of-type(4){
            background-image: url(./motoImg/4.webp);
        }
        .bottom .ctrl:nth-of-type(5){
            background-image: url(./motoImg/5.webp);
        }
        .bottom .active{
            border: 5px solid orange;
        }
        .right{
            width: 400px;
            height: 400px;
            position: relative;
            overflow: hidden;
            display: none;
        }
        .big_img img{
            width: 800px;
            height: 800px;
            position: absolute;
            display: none;
        }
        .big_img .show{
            display: block;
        }
    </style>
</head>
<body>
    <!-- 
        通过html+css布局，
        由四部分组成：
            1.要放大的尺寸正常的图片<div class="pic_img"></div>
            2.选项卡<div class="bottom"></div>
            3.选择放大图片位置的遮盖阴影<div class="shadow"></div>
            4.放大图片显示的区域<div class="big_img"></div>
     -->
    <div id="container">
        <!-- 左半部分 -->
        <div class="left">
            <!-- 左半部分上部，要放大的图片部分 -->
            <div class="top">
                <!-- 遮盖阴影部分 -->
                <div class="shadow"></div>
                <!-- 要放大的正常尺寸的图片 -->
                <div class="pic_img">
                    <img class="show" src="./motoImg/1.webp" alt="">
                    <img src="./motoImg/2.webp" alt="">
                    <img src="./motoImg/3.webp" alt="">
                    <img src="./motoImg/4.webp" alt="">
                    <img src="./motoImg/5.webp" alt="">
                </div>
            </div>
            <!-- 左半部分下部，选项卡，控制左上部分要显示的图片 -->
            <div class="bottom">
                <div class="ctrl active"></div>
                <div class="ctrl"></div>
                <div class="ctrl"></div>
                <div class="ctrl"></div>
                <div class="ctrl"></div>
            </div>
        </div>
        <!-- 右半部分，放大的图片显示的位置 -->
        <div class="right">
            <div class="big_img">
                <img class="show" src="./motoImg/1.webp" alt="">
                <img src="./motoImg/2.webp" alt="">
                <img src="./motoImg/3.webp" alt="">
                <img src="./motoImg/4.webp" alt="">
                <img src="./motoImg/5.webp" alt="">
            </div>
        </div>
    </div>
</body>
<script>
    // 封装获取单个DOM对象（通过传入，标签，类名，id....）函数
    function $(ele){return document.querySelector(ele);};

    // 获取选项卡所有对象集合
    var ctrls = document.querySelectorAll(".ctrl");
    // 获取所有要放大的图片的对象的集合
    var pic_imgs = document.querySelectorAll(".pic_img img");
    // 获取放大后的图片的对象的集合
    var big_imgs = document.querySelectorAll(".big_img img");

    // 定义index作为标记，主要记录当前点击的选项卡的索引是第几个图片，然后能在鼠标移入时用到，方便获取，对应放大图片的索引
    var index = 0;
    for(var i = 0; i < ctrls.length; i++){
        // 给每个选项卡对象绑定index属性，记录对应的索引
        ctrls[i].index = i;
        // 为每个选项卡div绑定单击事件
        ctrls[i].onclick = function(){
            // 清空所有图片区域的显示样式
            for(var j = 0; j < ctrls.length; j++){
                ctrls[j].className = "ctrl";
                pic_imgs[j].className = "";
                big_imgs[j].className = "";
            }
            // 为选项卡，图片添加相应触发的样式
            ctrls[this.index].className = "ctrl active";
            // 为要放大的图片绑定相应的class属性，点击选项卡后上方显示相应的要放大的图片
            pic_imgs[this.index].className = "show";
            // 为放大的图片绑定相应的class属性，点击选项卡后放大图片显示区域显示相应放大后的图片
            big_imgs[this.index].className = "show";
            index = this.index;
        }
    }
    // 给类名为top的div绑定鼠标移入事件
    $(".top").onmouseover = function(){
        // 鼠标移入后，遮盖阴影div的样式设为可见
        $(".shadow").style.display = "block";
        // 鼠标移入后，包含放大图片的div的样式设为可见
        $(".right").style.display = "block";
        document.onmousemove = function(ev){
            // 遮盖阴影相对于.top的div的left和top距离
            var x = ev.clientX - $("#container").offsetLeft - 100;
            var y = ev.clientY - $("#container").offsetTop - 100;

            // 通过三目运算控制阴影位置不超过.top的div边框
            x = x > 200 ? 200 : x;
            x = x < 0 ? 0 : x;
            y = y > 200 ? 200 : y;
            y = y < 0 ? 0 : y;

            // 为遮盖阴影块div设定left和top值（相对于.top的div）
            $(".shadow").style.left = x + "px";
            $(".shadow").style.top = y + "px";

            // 设置当前放大图片向左和向右移动的距离，阴影向右移动放大的图片向左移动，阴影模块与放大图片的移动方向相反
            // 由于本放大镜将图片放大2倍，所以放大图片在移动时候是对应阴影遮盖部分div移动的位移的两倍
            big_imgs[index].style.left = -(x * 2) + "px";
            big_imgs[index].style.top = -(y * 2) + "px";
        }
    }
    // 鼠标移出.top的div的范围时触发的事件，将遮盖阴影和右边放大图片区域隐藏
    $(".top").onmouseout = function(){
        // 鼠标移出后，遮盖阴影div的样式设为不可见
        $(".shadow").style.display = "none";
        // 鼠标移出后，包含放大图片的div的样式设为不可见
        $(".right").style.display = "none";
    }
</script>
</html>
风中风铃zdwen
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现放大镜功能
zxh996的博客
07-06 964
JavaScript精选案例 这个系列是在阿海前端学习中遇到的一些经典案例，具有很大的学习意义！ JS实现放大镜功能JavaScript精选案例前言一、放大镜案例方法一方法二总结 前言 js制作放大镜是非常经典的案例，在很多地方也非常常见，例如商品的查看，我也整理了一些自己以前使用过的方法，仅供参考学习。 一、放大镜案例 方法一 第一种方法较为常见，也更容易理解 代码如下（示例）： <style> .box { position: rela
放大镜效果的实现
weixin_41897680的博客
09-16 777
前言 最近在网上发现了一个放大镜效果，感觉很有意思。最终在b站找到了实现的教程。教程作者 xiao-high 教程链接点此查看 视频教程是基于html、css、js进行制作的。代码是我跟着教程手敲的。后期我会更新vue版和react版。 效果图 原生版 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compat
放大镜功能实现
kevin661996的博客
10-25 294
HTML页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href=
放大镜功能的实现（小图框移动与大图的移动）
讨厌写代码
09-17 225
放大镜动态移动的基本实现
放大镜的实现
candy755的博客
09-20 491
今天给大家实现放大镜的功能，也就是平时商城会经常用到的一种效果，其方法是，准备一张高像素的大图，当鼠标放到小图上，通过对大图进行绝对定位以此加载显示对应的位置，并且用mousemove事件的监听方法，当鼠标移到$small对象中，我们获取当前鼠标的相对坐标位置。 html的代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt...
实现放大镜功能ios源码下载
04-01
在iOS开发中，实现放大镜功能是一项常见的需求，特别是在用户需要查看屏幕小细节时。本资源提供了一个实现此功能的源码示例，适合开发者学习和参考。源码天堂IOS源码频道免费提供了这个功能的实现，使得开发者可以...
js实现放大镜功能
02-15
"js实现放大镜功能"就是这样的一个技术应用，它允许用户在鼠标悬停在图片上时，通过一个浮动的放大窗口查看图片的局部细节。下面我们将详细探讨如何使用JavaScript实现这一功能。 首先，我们需要明白这个功能的基本...
javascript实现 放大镜 功能.zip
07-09
在JavaScript实现的“放大镜”功能中，我们通常会结合HTML和...通过研究这些文件，你可以深入理解放大镜功能的实现原理，并将其应用到自己的项目中。此外，还可以通过调整参数和样式，定制符合自己需求的放大镜效果。
vc++实现放大镜功能
08-21
在VC++环境中实现放大镜功能是一项常见的编程任务，尤其对于开发桌面应用软件的程序员来说，这一功能能够增强用户的交互体验，特别是在需要精确查看图像或文本的场景下。本篇文章将详细探讨如何使用VC++来创建一个...
如何在AW中实现放大镜功能
12-05
在Authorware（AW）这个强大的多媒体创作工具中，实现放大镜功能可以极大地提升用户体验，特别是在展示细节丰富的图像时。以下将详细介绍如何通过AW的各个组件和功能来创建一个简单的放大镜效果。 首先，我们需要...
四种实现放大镜的源代码
06-09
四种实现放大镜的源代码，非常好。第一种都有源代码。
实现放大镜效果
csdn1313的博客
02-12 550
实现原理：使用2个div，里面分别放大图片和小图片，在小图片上应该还有一个遮罩层，通过定位遮罩层的位置来定位大图片的相对位置，而且，遮罩层的移动应该和大图片的移动方向相反 关键： 大图片和小图片大小比例应该和遮罩层的大小和放大显示区域的比例相同； 难点： 计算遮罩层来显示相应大图片的位置 话不多说直接看代码 代码 html： ...
思路超清晰-js实现放大镜功能
qq_32108357的博客
06-27 2215
js实现放大镜功能 ​ 今天写项目，但是发现项目中的图片太小，很多信息我们都看不清楚，但是为了页面布局，我有不能讲图片调的尺寸过于大，因此，就想到了用js实现图片的放大镜来解决我的问题。 实现后功能大致是这样： 放大镜原理： 做一个隐藏的大图，大图为空且隐藏，当鼠标移入时显示大图 主要功能： 鼠标移入，放大镜显示 鼠标移出，放大镜隐藏 鼠标移动，放大镜随之移动，并且当...
实现放大镜效果详解 JS+CSS
micoria的博客
03-16 689
思路： 实现放大镜功能有三个模块 左侧黄色框是放大镜，右侧是图片的放大后的效果。当鼠标移动到左侧图片上时，放大镜和右侧的大图显示 鼠标移动，放大镜也进行移动，此时获取鼠标的坐标进行控制放大镜，并设置移动的范围 当移动放大镜时，右侧放大效果图也进行移动 HTML代码： <div class="box"> <img class="preImg" src="images/3.jpg" alt=""> <div class="mask"></div&g.
图片放大镜的实现
ke_g3的专栏
04-14 410
图片放大镜的实现 功能介绍： 模拟圆形放大镜效果 支持图片旋转/翻转后的放大 显示效果： 场景： 图片查看一般引入了插件（可旋转/翻转等），blowup.js文件需要获取旋转参数值，所以需要修改我们原本有的旋转插件js // blowup.js $(function ($) { $.fn.blowup = function (attributes) { ...
一个简单的放大镜功能
zhengpeiqiang183的博客
12-15 287
动来动去     *{margin:0;padding:0;}   #bb{width:1024px;height:668px;background:url(1.jpg)no-repeat;overflow:hidden;position:absolute;left:100px;top:100px;}   #cc{width:150px;height:200px;border:2px so
dw如何点击图片放大的代码_用DW实现图片放大效果
weixin_27010489的博客
01-14 2718
/p>htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Magnifier#magnifier{width:342px;height:420px;position:absolute;top:100px;left:250px;fo...
java放大镜功能如何实现
最新发布
05-14
Java实现放大镜功能的核心思想是利用图形上下文的剪切区域以及图像的缩放功能。具体步骤如下： 1. 绘制原始图像。 2. 鼠标移动到需要放大的区域时，获取鼠标所在的像素点位置。 3. 根据鼠标位置计算出需要放大的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值