面向对象封装放大镜js代码

最新推荐文章于 2023-03-29 20:55:52 发布
最新推荐文章于 2023-03-29 20:55:52 发布
阅读量388 收藏
点赞数
分类专栏： js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46500485/article/details/108477976
版权

面向对象封装放大镜js代码

<!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;
        }
        
        body {
            height: 2000px;
        }
        
        .header {
            height: 200px;
            background-color: #ccc;
        }
        
        .container {
            width: 980px;
            margin: 0 auto;
        }
        
        ul {
            list-style: none;
        }
        
        .fdj {
            width: 350px;
            position: relative;
        }
        
        .fdj1 {
            width: 400px;
            position: relative;
        }
        
        .fdj2 {
            width: 200px;
            position: relative;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="container"></div>
    </div>
    <div class="content">
        <div class="container">
            <div class="fdj">

            </div>
            <hr>
            <div class="fdj1">

            </div>
            <hr>
            <div class="fdj2">

            </div>
        </div>
    </div>
    <script>
        // 第一步:把要书写的目标看作一个整体
        // 第二步:分析这个整体应当有什么属性和方法
        // 容器\图片数组\小图\图片列表\大图\镜片...
        // 第三步:定义类和属性


        function Zoom(container, imgArr) {
            //整个放大镜的容器
            this.container = container;
            //图片的数组
            this.imgArr = imgArr;
            //创建一张小图
            this.smallImg = document.createElement("img");
            //创建一张大图
            this.bigImg = document.createElement("img");
            //创建图片列表
            this.ul = document.createElement("ul");
            //创建镜片
            this.glass = document.createElement("div");
            //接受图片列表中有几个li  以便以后使用
            this.lis = [];
            //大图小图的比例
            this.r = 0.5;
        }
        Zoom.prototype = {
        //将构造函数传递进来
            constructor: Zoom,
            //基本架构
            render() {
                //创建小图的容器
                var smallContainer = document.createElement('div');
                //创建大图容器
                var bigContainer = document.createElement('div');
                //将第一张大图小图的地址给到各自的img元素节点
                this.smallImg.src = this.imgArr[0].smallImgPath;
                this.bigImg.src = this.imgArr[0].bigImgPath;
               	//将小图添加到小图的容器中
                smallContainer.appendChild(this.smallImg);
                //将大图添加到大图的容器中
                bigContainer.appendChild(this.bigImg);
                //将大图、小图、图片列表ul的容器给到大的容器
                this.container.appendChild(smallContainer);
                this.container.appendChild(bigContainer);
                this.container.appendChild(this.ul);
                //将放大镜给到小图的容器中
                smallContainer.appendChild(this.glass);
                //循环img数组并按照有多少个img就生成多少个li
                this.imgArr.forEach(item => {
                    var li = document.createElement('li');
                    var img = document.createElement('img');
                    //给每一个li中的img赋予一个图片地址
                    img.src = item.iconPath;
                    //上树
                    li.appendChild(img);
                    this.ul.appendChild(li);
                    this.lis.push(li);
                })

            },
            //添加样式
            addStyle() {
                //添加小图样式
                //得到小图和大图的容器
                var smallContainer = this.smallImg.parentNode;
                var bigContainer = this.bigImg.parentNode;
                //console.log(bigContainer);
                // console.log(smallContainer);
                //赋予小图的容器大小
                smallContainer.style.width = "100%";
                smallContainer.style.height = "100%";
                smallContainer.style.backgroundColor = 'red';
                // this.smallImg.style.display = "block";
                // this.smallImg.style.width = "100%";
                // this.smallImg.style.height = "100%";
				//定义小图的样式
                var smallImg = {
                    width: '100%',
                    height: '100%',
                    display: 'block'
                }
                for (var i in smallImg) {
                    this.smallImg.style[i] = smallImg[i];
                }
                //console.log(smallContainer.clientHeight);
                //定义大图的容器的样式
                var bigImg = {
                    width: smallContainer.clientWidth * 1.54 + 'px',
                    height: smallContainer.clientWidth * 1.54 + 'px',
                    position: 'absolute',
                    left: '110%',
                    top: 0,
                    overflow: 'hidden'
                }
                for (var i in bigImg) {
                    // console.log(bigImg[i]);
                    bigContainer.style[i] = bigImg[i];
                }
                //定义放大镜的样式
                var glass = {
                    width: smallContainer.clientWidth * this.r + 'px',
                    height: smallContainer.clientWidth * this.r + 'px',
                    position: 'absolute',
                    left: 0,
                    top: 0,
                    backgroundColor: 'rgba(255,0,0,0.5)'
                }
                for (var i in glass) {
                    // console.log(bigImg[i]);
                    this.glass.style[i] = glass[i];
                }
                //定义图片列表的样式
                var ul = {
                    display: 'flex',
                    justifyContent: 'space-around',
                    paddingTop: '10px'
                }
                for (var i in ul) {
                    this.ul.style[i] = ul[i]
                }
                //给li中的图增加边框
                this.lis.forEach(item => {
                    item.style.border = "2px solid transparent"
                })
                //给大图样式 增加定位
                var bigImg = {
                    // width: '100%',
                    // height: '100%',
                    position: 'absolute',
                    top: 0,
                    left: 0
                }
                for (var i in bigImg) {
                    this.bigImg.style[i] = bigImg[i]
                }
            },
            //添加事件
            addEvent() {
            //给每个li绑定事件
                this.lis.forEach((item, index) => {
                //当鼠标移入li时
                    item.addEventListener("mouseenter", () => {
                            // console.log(this.imgArr);
                            //给大图和小图重新定义图片的路径
                            this.smallImg.src = this.imgArr[index].smallImgPath;
                            this.bigImg.src = this.imgArr[index].bigImgPath;
                            //排他法
                            this.lis.forEach((item, index) => {
                                item.style.borderColor = 'transparent'
                            })
                            //给点击到的li一个边框颜色
                            this.lis[index].style.borderColor = 'red'
                        }

                    )
                })
                //鼠标移入小图的容器时  移动放大镜
                this.smallImg.parentNode.addEventListener("mousemove", (e) => {
                    // console.log(1);
                    //得到最大的容器距离页面的距离
                    let obj = Zoom.offset(this.container);
                    // console.log(obj.left, obj.top);
                    //鼠标在页面中的位置减元素的位置减放大镜的大小除以2 就是放大镜的位置
                    let x = e.pageX - obj.left - this.glass.clientWidth / 2;
                    let y = e.pageY - obj.top - this.glass.clientHeight / 2
                    if (x < 0) {
                        x = 0
                    } else if (x > this.smallImg.parentNode.clientWidth - this.glass.clientWidth) {
                        x = this.smallImg.parentNode.clientWidth - this.glass.clientWidth;
                    }
                    if (y < 0) {
                        y = 0
                    } else if (y > this.smallImg.parentNode.clientHeight - this.glass.clientHeight) {
                        y = this.smallImg.parentNode.clientHeight - this.glass.clientHeight;
                    }
                    this.glass.style.left = x + 'px';
                    this.glass.style.top = y + 'px';
                    let r = (this.smallImg.clientWidth * this.r / (this.bigImg.width - this.bigImg.parentNode.clientWidth));
                    this.bigImg.style.left = -x / r + 'px';
                    this.bigImg.style.top = -y / r + 'px';
                })
            }
        }
        Zoom.offset = function(dom) {
            // 定义两个变量
            var left = 0;
            var top = 0;
            // 第一次不应该把自己的边框算进去 
            left = dom.offsetLeft;
            top = dom.offsetTop;
            // 为了兼容性考虑，IE8要单独处理
            // 检测window.navigator.userAgent这个字符串里面是否包含"MSIE 8" 
            // 如果包含就说明是IE 如果不包含就说明不是IE
            var isIE8 = false;
            if (window.navigator.userAgent.indexOf("MSIE 8") != -1) {
                isIE8 = true;
            }
            // 让自己指向上一层
            dom = dom.offsetParent;
            // 而且因为dom没有直接获取到页面的属性所以只能一层一层的往上找
            while (dom != document.body) {
                // 如果是IE8  不需要加 clientTop clientLeft
                if (isIE8) {
                    // 累加每一层的offsetLeft
                    left += dom.offsetLeft
                        // 累加每一层的offsetTop 
                    top += dom.offsetTop
                } else {
                    // 累加每一层的offsetLeft 和clientLeft
                    left += dom.offsetLeft + dom.clientLeft;
                    // 累加每一层的offsetTop 和clientTop
                    top += dom.offsetTop + dom.clientTop;
                }
                // 让dom指向上一层
                dom = dom.offsetParent;
            }
            return {
                left: left,
                top: top
            }
        }
        var fdj = document.querySelector('.fdj');
        var fdj1 = document.querySelector('.fdj1');
        var fdj2 = document.querySelector('.fdj2');


        let imgArr = [{
            iconPath: "./images/icon01.jpg",
            smallImgPath: "./images/small01.jpg",
            bigImgPath: "./images/big01.jpg"
        }, {
            iconPath: "./images/icon02.jpg",
            smallImgPath: "./images/small02.jpg",
            bigImgPath: "./images/big02.jpg"
        }, {
            iconPath: "./images/icon03.jpg",
            smallImgPath: "./images/small03.jpg",
            bigImgPath: "./images/big03.jpg"
        }, ];
        let z = new Zoom(fdj, imgArr);
        z.render();
        z.addStyle();
        z.addEvent();


        let z1 = new Zoom(fdj1, imgArr);
        z1.render();
        z1.addStyle();
        z1.addEvent();


        let z2 = new Zoom(fdj2, imgArr);
        z2.render();
        z2.addStyle();
        z2.addEvent();
    </script>
</body>

</html>
江呱呱
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript实现放大镜效果（手把手教会+详细注释+完整代码）
Tang_jibin的博客
03-31 4194
JavaScript实现的放大镜效果
JavaScript 放大镜（面向对象）
qq_45799465的博客
02-09 851
放大镜效果展示： HTML代码： <!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".
js实现放大镜
最新发布
一颗帅白菜的博客
03-29 74
【代码】js实现放大镜。
js放大镜功能 class类方法封装
qq_54455551的博客
04-24 307
放大镜功能，原生js书写，move遮罩层盒子宽高按比例获取，设置小盒子宽高，以及大盒子宽高，计算比例
放大镜封装js
12-29
自己编写关于放大镜的js
js面向对象之实现淘宝放大镜
01-19
JS面向对象——淘宝放大镜实现 图片的引用是一个大图，一个小图 传输用的ajax，记得改成自己的ip地址，js和html都改一下 效果： 实现： js文件： LoadMethod.js class LoadMethod{ static get LOAD_IMG_FINISH(){...
jq封装放大镜.rar
06-18
总之，“jq封装放大镜”是一个实用的工具，可以帮助开发者快速实现商品图片的放大效果，同时也是一个很好的学习资源，特别是对于想要提升jQuery和JavaScript技能的新手。通过分析和实践这个插件，你可以掌握更多的...
【JavaScript源代码】JavaScript面向对象实现放大镜案例.docx
12-29
【JavaScript 面向对象实现放大镜案例】 在JavaScript中，面向对象编程是一种常见的编程范式，用于组织和管理代码。在这个案例中，我们将利用面向对象的方法来实现一个动态的放大镜效果，常用于电商网站的产品展示...
使用jquery 做的一个小练习，图片放大镜
04-22
10. **代码结构**：为了保持代码的整洁和可维护性，可以遵循模块化和面向对象的设计原则，将放大镜的功能封装成一个插件或函数。 通过这个小练习，开发者不仅能掌握jQuery的基本用法，还能了解到如何将这些知识应用...
js图片放大缩小效果 商品展示 三
12-27
但是，由于Prototype的设计哲学更注重于面向对象编程，所以可能需要创建自定义的类来封装图片放大缩小的功能。这个过程中，可能会使用到`Element.observe`来绑定事件，`Element.setStyle`或`Element.resize`来改变...
纯JS图片放大镜特效封装插件
08-22
基于纯JS的图片放大镜特效封装插件源码。
js实现商品图片放大镜
Evan_QB的博客
09-07 1547
html代码: css样式: * { margin: 0; padding: 0; } .box { width: 3
JS实现放大镜功能
热门推荐
weixin_40758850的博客
04-22 1万+
我是看完教学视频做的，一开始发现自己能实现放大，但有个小bug：显示的位置不大对应，原因：mask，box(=小图的宽)，big，bImg的宽不能随便设置，需按照比例，否则mask覆盖区域与显示出的大图区域不符。 它主要有2个比例关系： //放大显示区域的对应比例=====在CSS里设置 mask的宽 / box的宽 = big的宽 / bImg的宽 //大图对应移动（鼠...
JS放大镜demo详细讲解
a5252145的博客
08-29 7092
前言： 此放大镜可直接改变图片（我是用的是zoom.jpg）使用。前提是必须跟我一样的布局，不然里面的clientX和offsetLeft得作出相应改动。 前提先了解数学算法：     求遮罩层mask宽度       大图、大图显示区、小图、遮罩层     1、小图是大图等比缩放的     2、遮罩层是大图显示区缩放的     小图/大图 = 遮罩层/大图显示区         遮罩层 = ...
【原生JS】简单放大镜效果
zuncle的博客
02-08 2994
演示地址：点我<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0;
jquery封装放大镜（外部放大）
LJ_QWE的博客
09-28 226
css .zoom-big{ position:absolute; top:0; right:-440px; width: 200px; height: 200px; overflow: hidden; } .big-img{ position:relative; } .detile-img{ width: 400px; height: 400px; } .share-img1{ width:400px; height:400px; }
封装jquery放大镜
document_ljt的博客
01-05 347
/** * Created by Administrator on 2018/1/4 0004. */ /** * Created by Administrator on 2018/1/4. */ /* 放大镜*/ 一个大盒子id= Box 中放一个小盒子id= smallBox （放一张图片） 一个大盒子id=bigBox（放一张图片） ul 用来小图片切换 (function
数据结构链表操作大全，面向对象封装
数据结构链表操作大全是一种在面向对象编程中对链表进行操作的封装方法。链表是一种重要的数据结构，它可以动态地存储和处理数据。本文将介绍链表的创建、插入、删除、查找等操作，并在面向对象的方法上进行封装。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值