js实现淘宝放大镜效果

最新推荐文章于 2023-08-30 23:12:02 发布
最新推荐文章于 2023-08-30 23:12:02 发布
阅读量1.2w 收藏 15
点赞数 8
分类专栏： 前端工程师 文章标签： javascript html css 淘宝网
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yzi_angel/article/details/52318681
版权 
    记得很久以前，小编就准备写个放大镜，但是种种原因导致，一直没有完成这个愿望，下面，让我们一起来实现这个常见的功能吧。
    不懂的同学，可能认为这很难细实现，觉得它很博大精深的样子，其实真了解他了，你会发现原来这么简单，下面废话不多说，让我们一起来实现它吧。
    首先当然是html布局和css样式：
    ![效果图](https://img-blog.csdn.net/20160825213024936)
    我们将整个布局分三个部分，第一部分为主题的小图片，将他放在整个布局的左上角；第二部分是下边的图片列表，直接跟在小图片的下边；最后一部分是放大镜显示部分，将其定位到小图片的右边。
    然后就是利用js添加基本事件（包括鼠标的移入移出等）详细的内用见如下代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul{
            list-style: none;
            padding: 0;
        }
        .zoom-box{
            width: 452px;
            position: relative;
        }
        .small-box{
            position: relative;
            border: 1px solid #ccc;
        }
        .small-box img{
            width: 100%;
            height: 100%;
        }
        .small-box .square{
            position: absolute;
            left: 0;
            top: 0;
            background: yellow;
            opacity: 0.5;
            /*display: none;*/
        }
        .small-box .mask{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .img-list ul::after{
            clear: both;
            content: '';
            display: table;
        }
        .img-list ul li{
            float: left;
            margin: 0 10px;
            padding: 6px;
        }
        .img-list img{
            border: 2px solid transparent;
        }
        .img-list img.active{
            border: 2px solid red;
        }
        .big-box{
            position: absolute;
            top: 0;
            left: 100%;
            margin-left: 2px;
            border: 1px solid #cccccc;
            width: 500px;
            height: 500px;
            overflow: hidden;
            display: none;
        }
        .big-box img{
            position: absolute;
            top: 0;
            left: 0;
        }

    </style>
</head>
<body>
    <!-- 布局-->
    <div class="zoom-box"><!-- 容器-->
        <div class="small-box"><!-- 小图片容器-->
            <img src="../img/magnifier/m1.jpg" alt=""/>
            <div class="square"></div><!-- 鼠标选中框-->
            <div class="mask"></div><!-- 鼠标悬浮位置-->
        </div>
        <div class="img-list"><!-- 图片列表-->
            <ul>
                <li><img class="active" src="../img/magnifier/s1.jpg" alt="" data-small="../img/magnifier/m1.jpg"
                         data-big="../img/magnifier/b1.jpg"/></li>
                <li><img src="../img/magnifier/s2.jpg" alt="" data-small="../img/magnifier/m2.jpg"
                         data-big="../img/magnifier/b2.jpg"/></li>
                <li><img src="../img/magnifier/s3.jpg" alt="" data-small="../img/magnifier/m3.jpg"
                         data-big="../img/magnifier/b3.jpg"/></li>
                <li><img src="../img/magnifier/s4.jpg" alt="" data-small="../img/magnifier/m4.jpg"
                         data-big="../img/magnifier/b4.jpg"/></li>
                <li><img src="../img/magnifier/s5.jpg" alt="" data-small="../img/magnifier/m5.jpg"
                         data-big="../img/magnifier/b5.jpg"/></li>
            </ul>
        </div>
        <div class="big-box"><!-- 放大镜-->
            <img src="../img/magnifier/b1.jpg" alt=""/>
        </div>
    </div>

    <script>
        //获取要操作的元素
        var smallbox = $('.small-box .mask');
        var smallimg = $('.small-box img');
        var square = $('.square');
        var bigbox = $('.big-box');
        var bigimg = $('.big-box img');
        var imgs = $all('.img-list img');

        //鼠标经过图片列表显示被选中，实现图片切换
        for(var i = 0; i < imgs.length; i++){
            imgs[i].onmouseover = function(){
                for(var j = 0; j < imgs.length; j++){
                    imgs[j].className = '';
                }
                this.className = 'active';

                //改变对应的图片链接
                smallimg.src = this.getAttribute('data-small');
                bigimg.src = this.getAttribute('data-big');
            };
        }

        //鼠标移入放大器显示并设置选中框的大小
        smallbox.onmouseover = function(){
            square.style.display = 'block';
            bigbox.style.display = 'block';
            //位置w/smallimg.w = bigbox.w/bigimg.w
            square.style.width = bigbox.offsetWidth * smallimg.offsetWidth/bigimg.offsetWidth + 'px';
            square.style.height = bigbox.offsetHeight * smallimg.offsetHeight/bigimg.offsetHeight + 'px';
        };
        //鼠标移出放大器隐藏
        smallbox.onmouseout = function(){
            square.style.display = 'none';
            bigbox.style.display = 'none';
        };

        //放大器移动
        //获取鼠标的位置
        smallbox.onmousemove = function(ev){
            var oEvent = ev || event;
            var x = oEvent.offsetX - square.offsetWidth/2;
            var y = oEvent.offsetY - square.offsetHeight/2;

            if(x < 0){
                x = 0;
            }
            if(x > smallbox.offsetWidth - square.offsetWidth){
                x = smallbox.offsetWidth - square.offsetWidth;
            }
            if(y < 0){
                y = 0;
            }
            if(y > smallbox.offsetHeight - square.offsetHeight){
                y = smallbox.offsetHeight - square.offsetHeight;
            }

            //给选中框定位
            square.style.left = x + 'px';
            square.style.top = y + 'px';

            //给放大器定位  x/? = smallimg.w/bigimg.w
            bigimg.style.top = -y * bigimg.offsetWidth/smallimg.offsetWidth + 'px';
            bigimg.style.left = -x * bigimg.offsetHeight/smallimg.offsetHeight + 'px';

        };

        //通过名称查找某个元素
        function $(name){
            return document.querySelector(name);
        }
        //通过名称查找相同的一组数据
        function $all(name){
            return document.querySelectorAll(name);
        }
    </script>
</body>
</html>

到这里这个放大镜效果就完成了，有兴趣的同学抓紧试试去吧=_=

YZiAngel
关注
  • 8
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
原生js实现淘宝放大镜效果
10-19
原生js实现淘宝放大镜效果，轻轻松松达到淘宝预览商品放大商品时的效果，不管是初级前端开发工程师，还是高级开发工程师，这个小项目可能会在实际开发项目过程中用得到，希望能让大家提升js功底，原生js实现淘宝放大镜效果，轻轻松松达到淘宝预览商品放大商品时的效果，不管是初级前端开发工程师，还是高级开发工程师，这个小项目可能会在实际开发项目过程中用得到，希望能让大家提升js功底，原生js实现淘宝放大镜效果，轻轻松松达到淘宝预览商品放大商品时的效果，不管是初级前端开发工程师，还是高级开发工程师，这个小项目可能会在实际开发项目过程中用得到，希望能让大家提升js功底，原生js实现淘宝放大镜效果，轻轻松松达到淘宝预览商品放大商品时的效果，不管是初级前端开发工程师，还是高级开发工程师，这个小项目可能会在实际开发项目过程中用得到，希望能让大家提升js功底，原生js实现淘宝放大镜效果，轻轻松松达到淘宝预览商品放大商品时的效果，不管是初级前端开发工程师，还是高级开发工程师，这个小项目可能会在实际开发项目过程中用得到，希望能让大家提升js功底，原生js实现淘宝放大镜效果，轻轻松松达到淘宝预览商品放大商品时的效果
使用JavaScript实现放大镜效果（有详细注释）
chirrupy_YI的博客
06-15 1645
如何使用JavaScript实现放大镜效果
原生js放大镜插件
CIA的博客
10-01 248
class Magnifier { constructor(newSmallBox, newBigBox, newMask) { this.smallBox = newSmallBox; this.bigBox = newBigBox; this.mask = newMask; } onmouseover() { let that = this;
js实现简单放大镜效果
11-20
用js实现简单放大镜效果，供大家参考，具体内容如下 此处放大镜实现的效果就是当鼠标放置在图片上会有半透明遮罩，图片的一个区域就会被放大，然后展示在右边。当鼠标移动时右边的大图片也会局部移动。这里的放大并不是真正的放大，而是等比例移动。下面是实现的代码： css样式代码如下： <style> .s_box{width:400px;height: 300px;position: absolute;left: 50px;top:100px;} .s_box img{width: 400px;height: 300px;} .s_box span{width: 130px;height: 10
js实现放大镜效果
qq_65325072的博客
03-15 6222
思路： 先让mask块和bigImg块、big块隐藏，当鼠标经过pre_img就显示遮罩层mask和big块，获取鼠标当前的位置，根据“ 大图片移动距离 = 遮挡层移动距离*大图片最大移动距离 / 遮挡层最大移动距离 ”实现放大镜效果 大概思路实现图： html + css 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t...
js实现放大镜（详细注释）
H-rosy的博客
09-12 2280
大致步骤：首先我们应该先构思好布局：1：先有一个div存放原始图片。2：再有一个div存放放大后的图片。3：来一个遮罩层让用户道自己正在观察哪个区域，并且实现遮罩层跟随鼠标移动而移动。4：显示放大后的图片。hover的小知识点： hover后面一般都是控制子元素，无法控制父元素的效果 hover更改同级（兄弟）元素属性：更改兄弟元素又分两种情况：需要更改的兄弟元素是当前元素的相邻元素，也就是说紧接着当前元素，在hover后面使用‘+’号链接就行，就是.event1:hover + .big需要改变的兄
【JS案例】JS实现图片放大镜功能
最新发布
Ghmin的博客
08-30 2602
原生JS实现图片放大镜效果，详细讲解一步步操作，完整代码
JavaScript基础 - 经典案例4 -放大镜 (含公式)
never_stop_study的博客
10-06 967
JavaScript基础 - 经典案例4 -放大镜 (含公式)
原生JavaScript实现淘宝放大镜效果
12-22
运用原生js基础知识实现类似于淘宝放大镜效果，图片是两张大小不同的图片，图片资源自己寻找
js实现淘宝浏览商品放大镜功能
01-18
本文实例为大家分享了js实现淘宝浏览商品放大镜的具体代码，供大家参考，具体内容如下 1、准备两张图片，其中一张图片分辨率为另一张图片的二倍。 2、前端页面布局 //box1位左侧原图，box2为右侧放大图额显示框,...
JS实现放大镜
m0_71144319的博客
03-19 230
js实现放大镜效 首先放大镜的原理，通过调整移动距离比例，由左方小图片中移动小方框，显示右边提前设置好的窗口中放大的局部图片
js实现放大镜效果(图片放大)—JavaScript
热门推荐
原地起飞
11-10 1万+
类似于放大镜效果的图片放大效果，学到了才知道什么叫做人外有人！！！！
JavaScript网页特效——放大镜(1+X Web前端开发初级 例题)
黛琳ghz的博客，期待你的关注。
03-27 3275
JavaScript网页特效——放大镜(1+X Web前端开发 例题)
CocosCreator Shader学习（三）：放大镜缩小镜效果
三思而先行的博客
04-08 2262
定点缩放效果 原理：根据缩放比例，判断镜面范围内的点实际应该显示哪个点的颜色值，问题就变成怎么根据缩放比例进行坐标转换！ 顶点着色器代码不用修改。 片元着色器代码如下： CCProgram fs %{ precision highp float; #include <alpha-test> in vec4 v_color; #if USE_TEXTU...
JS实现放大镜功能
zxh996的博客
07-06 867
JavaScript精选案例 这个系列是在阿海前端学习中遇到的一些经典案例，具有很大的学习意义！ JS实现放大镜功能JavaScript精选案例前言一、放大镜案例方法一方法二总结 前言 js制作放大镜是非常经典的案例，在很多地方也非常常见，例如商品的查看，我也整理了一些自己以前使用过的方法，仅供参考学习。 一、放大镜案例 方法一 第一种方法较为常见，也更容易理解 代码如下（示例）： <style> .box { position: rela
Javascript实现放大镜效果（手把手教会+详细注释+完整代码）
Tang_jibin的博客
03-31 3162
JavaScript实现的放大镜效果
【JavaScript】实现放大镜效果
Ai-Fairy的博客
08-31 673
在电商类的网站中，点击商品页，一般会有放大镜以便于放大查看商品细节，用js来实现这个放大镜的效果。
轮播图怎么实现放大镜效果
06-12
轮播图实现放大镜效果的具体步骤如下： 1. 在 HTML 结构中添加轮播图和放大镜的相关元素及其样式。 2. 使用 CSS 样式对轮播图和放大镜进行布局和样式设置，设置轮播图容器的宽度和高度，以及放大镜的位置、大小等...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值