【JavaScript】原生JS实现放大镜

最新推荐文章于 2023-06-15 17:34:06 发布
最新推荐文章于 2023-06-15 17:34:06 发布
阅读量271 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42872073/article/details/85233628
版权

我们经常会在一些电商网站看到类似于放大镜的效果（对鼠标在的位置进行放大观察），可以用原生JS来实现。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>JS版放大镜</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            border: 0;
        }
        .block{
            width: 350px;
            height: 533px;
        }
        .centerimg{
            position: relative;
            width: 100%;
            height: 449px;
        }
        .smallimg{
            width: 300px;
            height: 64px;
            margin: 20px 25px;
        }
        .center{
            width: 100%;
            height: 100%;
            vertical-align: middle;
        }
        .small{
            width: 50px;
            height: 100%;
            margin: 0 3px;
            float: left;
            border: 2px solid transparent;
        }
        .small img{
            width: 100%;
            height: 100%;
        }
        .ceng{
            position: absolute;
            width: 236.25px;
            height: 236.31px;
            background-color: rgba(255, 182, 193, 0.5);
            display: none;
        }
        .bigimg{
            position: absolute;
            left: 350px;
            width: 533px;
            height: 537px;
            border: 1px solid silver;
            box-sizing: border-box;
            display: none;
        }
    </style>
</head>
<body>
<div class="block">
    <div class="bigimg"></div>
    <div class="centerimg" data-big="./image/5b7cf1e5Nb30e8c50.jpg!cc_800x1026.jpg">
        <div class="ceng"></div>
        <img class="center" src="./image/5b7cf1e5Nb30e8c50.jpg!cc_350x449.jpg" alt=""/>
    </div>
    <div class="smallimg">
        <div class="small" data-big="./image/5b7cf1e5Nb30e8c50.jpg!cc_800x1026.jpg" data-middle="./image/5b7cf1e5Nb30e8c50.jpg!cc_350x449.jpg"><img src="./image/5b7cf1e5Nb30e8c50.jpg!cc_50x64.jpg" alt=""/></div>
        <div class="small" data-big="./image/5b7cf1e9Nd7350f8b.jpg!cc_800x1026.jpg" data-middle="./image/5b7cf1e9Nd7350f8b.jpg!cc_350x449.jpg"><img src="./image/5b7cf1e9Nd7350f8b.jpg!cc_50x64.jpg" alt=""/></div>
        <div class="small" data-big="./image/5b7cf1ebNdf72f42b.jpg!cc_800x1026.jpg" data-middle="./image/5b7cf1ebNdf72f42b.jpg!cc_350x449.jpg"><img src="./image/5b7cf1ebNdf72f42b.jpg!cc_50x64.jpg" alt=""/></div>
        <div class="small" data-big="./image/5b7cf1ecN6742c614.jpg!cc_800x1026.jpg" data-middle="./image/5b7cf1ecN6742c614.jpg!cc_350x449.jpg"><img src="./image/5b7cf1ecN6742c614.jpg!cc_50x64.jpg" alt=""/></div>
        <div class="small" data-big="./image/5b7cf1eeN9a440daf.jpg!cc_800x1026.jpg" data-middle="./image/5b7cf1eeN9a440daf.jpg!cc_350x449.jpg"><img src="./image/5b7cf1eeN9a440daf.jpg!cc_50x64.jpg" alt=""/></div>
    </div>
</div>
</body>
<script>
    var bigimg=document.getElementsByClassName("bigimg")[0];
    var ceng=document.getElementsByClassName("ceng")[0];
    var centerimg=document.getElementsByClassName("centerimg")[0];
    var center=document.getElementsByClassName("center")[0];
    var smallimg=document.getElementsByClassName("smallimg")[0];
    var small=document.getElementsByClassName("small");
    small[0].style.borderColor="red";   //刚开始给第一个小图片默认设置红色边框
    var redborder=small[0];     //改变量用来存储具有红色边框属性的对象
    // 鼠标进入小图
    for(var i=0;i<small.length;i++){
        small[i].onmouseenter=function(){
            redborder.style.borderColor="transparent";   //将上一个红色边框去除
            this.style.borderColor="red";                 //给当前对象设置红色边框
            redborder=this;                                //将当前对象存到redborder变量  用来记录当前红色边框对象以便下次清除
            center.src=this.getAttribute("data-middle");  //进入小图，出现对应的中图
            centerimg.setAttribute("data-big",this.getAttribute("data-big"));  //进入小图，将中图对应的大图传给中图
        }
    }
    //鼠标在中图里面移动
    centerimg.onmousemove=function(event){
        ceng.style.display="block";
        var x=event.clientX||event.pageX;  //获取鼠标的坐标
        var y=event.clientY||event.pageY;
        //计算层绝对定位后的left 和top值，动态改变层的位置
        var left=(x-this.offsetLeft-118.125)<=0?0:(x-this.offsetLeft-118.125)>=113.75?113.75:(x-this.offsetLeft-118.125);
        var top=(y-this.offsetTop-118.155)<=0?0:(y-this.offsetTop-118.155)>=212.69?212.69:(y-this.offsetTop-118.155);
        ceng.style.left=left+"px";
        ceng.style.top=top+"px";
        //鼠标在中图里面移动，将对应部分放大
        bigimg.style.backgroundPosition=(-left)*2.28+"px "+(-top)*2.28+"px";

    }
    //鼠标进入中图
    centerimg.onmouseenter=function(){
        this.style.cursor="move";  //改变鼠标形状
        var bigimgsrc=this.getAttribute("data-big");   //鼠标进入中图 得到大图的地址
        bigimg.style.backgroundImage="url("+bigimgsrc+")";  //鼠标进入中图 设置对应的大图为背景
        bigimg.style.display="block";     //鼠标进入中图   大图出现
    }
    //鼠标离开中图
    centerimg.onmouseleave=function(){
        ceng.style.display="none";     //层隐藏
        bigimg.style.display="none";     //鼠标离开中图   大图隐藏
    }

</script>
</html>

实现的效果如下图：
在这里插入图片描述

Lxq~
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
JavaScript基础 - 经典案例4 -放大镜 (含公式)
never_stop_study的博客
10-06 1039
JavaScript基础 - 经典案例4 -放大镜 (含公式)
JavaScript实现放大镜效果代码示例
10-15
JavaScript实现的放大镜效果是一种常见的网页交互功能，它允许用户在鼠标悬停在小图上时，通过一个浮动的放大窗口预览图像的细节。这种效果常见于电子商务网站的产品图片展示，增强了用户体验，使得用户无需点击就能...
使用JavaScript实现放大镜效果（有详细注释）
最新发布
chirrupy_YI的博客
06-15 2465
如何使用JavaScript实现放大镜效果
Javascript实现放大镜效果（手把手教会+详细注释+完整代码）
Tang_jibin的博客
03-31 4060
JavaScript实现的放大镜效果
JavaScript网页特效——放大镜(1+X Web前端开发初级 例题)
黛琳ghz的博客，期待你的关注。
03-27 3375
JavaScript网页特效——放大镜(1+X Web前端开发 例题)
js实现放大镜（详细注释）
H-rosy的博客
09-12 2424
大致步骤：首先我们应该先构思好布局：1：先有一个div存放原始图片。2：再有一个div存放放大后的图片。3：来一个遮罩层让用户道自己正在观察哪个区域，并且实现遮罩层跟随鼠标移动而移动。4：显示放大后的图片。hover的小知识点： hover后面一般都是控制子元素，无法控制父元素的效果 hover更改同级（兄弟）元素属性：更改兄弟元素又分两种情况：需要更改的兄弟元素是当前元素的相邻元素，也就是说紧接着当前元素，在hover后面使用‘+’号链接就行，就是.event1:hover + .big需要改变的兄
原生javascript实现图片放大镜效果
10-20
主要为大家详细介绍了原生javascript实现图片放大镜效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生JavaScript实现淘宝放大镜效果
12-22
运用原生js基础知识实现类似于淘宝放大镜效果，图片是两张大小不同的图片，图片资源自己寻找
原生js实现放大镜特效
10-20
在本文中，我们将探讨如何使用原生JavaScript实现一个放大镜特效，这种效果常用于电商网站的产品图片展示，让用户能更清晰地查看商品细节。首先，我们要理解放大镜特效的关键原理和涉及到的技术点。 **放大镜特效...
原生js实现放大镜
10-20
原生JS实现放大镜 /* ...CSS样式... */ <div class="inner"></div> // ...JavaScript代码... ``` 接下来，我们编写JavaScript代码来处理鼠标事件。当鼠标移入小图像时，放大镜视窗（`....
javascript图片放大镜效果
03-19
NULL 博文链接：https://luoyahu.iteye.com/blog/707887
原生js实现放大镜效果
10-20
本文主要分享了原生js封装实现放大镜效果的示例代码，具有一定的参考价值，下面跟着小编一起来看下吧
HTML+css+JavaScript实现放大镜效果
09-07
HTML+css+JavaScript实现放大镜效果
js放大镜（适用于商品详情）
10-22
用Js写的放大镜功能 支持应用到商品详情中 鼠标划过图片放大图片中的细节
js实现放大镜效果
qq_65325072的博客
03-15 6307
思路： 先让mask块和bigImg块、big块隐藏，当鼠标经过pre_img就显示遮罩层mask和big块，获取鼠标当前的位置，根据“ 大图片移动距离 = 遮挡层移动距离*大图片最大移动距离 / 遮挡层最大移动距离 ”实现放大镜效果 大概思路实现图： html + css 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t...
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
javaScript实现放大镜效果
Charlotte_99的博客
05-02 1668
放大镜效果图如下： 2个比例核心： 右侧大图宽高设置 左侧展示图大小 / 遮罩层 = 右侧大图大小？ / 右侧放大镜盒子 放大镜移动距离设置 遮罩层移动位置 / 遮罩层宽高 = 右侧大图left | top / 右侧放大镜盒子宽高 html机构如下： <!-- 1.外围盒子 --> <div id="warper"> <!-- 2.左侧展示图 --> <div class="leftShow">
js和“原生js”
qq_44920169的博客
12-28 1364
js和原生js的区别 js =javascript,是ECMAScript的一个实现，也是目前最流行的一个实现。 “”原生js”主要是相对“对javascript代码进行封装和抽象后的框架和类库”来说的。也就是说，自从产生了"js类库"和"js框架"这些概念后，才有了“原生js”这个概念。 对于这两者之间的概念实在不想看太多文字的，看下面代码： document.getElementById('someID').style.color='red' 这个是用所谓的“原生js”写的``` $("#someI
javascript-----与原生js相关的重要整理，原生基础
Seeyoucm
04-15 525
原生js相关的重要整理，原生基础
js实现商品放大镜
05-25
下面是一个基于JavaScript实现的商品放大镜示例： HTML： ```html <div class="zoom-window"></div> ``` CSS: ```css .product-image { position: relative; width: 400px; height: 400px; } .product-...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值