JS实现放大镜（面向对象方式）

最新推荐文章于 2022-10-06 22:43:05 发布
最新推荐文章于 2022-10-06 22:43:05 发布
阅读量177 收藏
点赞数
文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41679133/article/details/107562706
版权

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        #head1 {
            width: 2000px;
            height:700px;
        }
        #small{
            margin-top: 150px;
            margin-left: 350px;
            width: 300px;
            height: 200px;
            border:1px solid #eee;
            border-radius: 4px;
            position: relative;
        }

        #small img{
            width: 100%;
            height: 100%;
        }

        div    {
            float: left;
            /* margin-right: 10px; */
        }

        #big{
            margin-top: 150px;
            margin-left: 20px;
            width: 300px;
            height: 200px;
            overflow: hidden;
            position: relative;
            border:1px solid #eee;
            border-radius: 4px;
            display: none;
        }

        #look{
            width: 300px;
            height: 200px;
            position: absolute;
            left: 0px;
            top:0px;
        }

        #move{
            width: 100px;
            height: 100px;
            background:#000;
            opacity: .5;
            position: absolute;
            display: none;
            left: 0px;
            top: 0px;
        }
    </style>
</head>
<body>
        <ul id="head1"></ul>
        <!-- <div id="small">
            <img src="../新建文件夹/3.jpg">
            <p id="move"></p>
        </div>
        <div id="big">
            <img src="../新建文件夹/3.jpg" id="look">
        </div> -->
        <script>
            //左边小框
            (function(){
               function Small(width,height,url){
                  this.width = width;
                  this.height = height;
                  this.url = url;
               }
               Small.prototype.init = function(){
                   this.createElement();
               }
               Small.prototype.createElement = function(){
                   this.smallBox = document.createElement('div');
                   document.getElementById('head1').appendChild(this.smallBox);
                   this.smallBox.style.width = this.width;
                   this.smallBox.style.height = this.height;
                   this.smallBox.id = 'small';
                   this.imageBox = document.createElement('img');
                   this.imageBox.style.width = this.width;
                   this.imageBox.style.height = this.height;
                   this.imageBox.src = this.url;
                   this.smallBox.appendChild(this.imageBox);
                   this.moveBox = document.createElement('p');
                   this.moveBox.id = 'move';
                   this.smallBox.appendChild(this.moveBox);

               }
               window.Small = Small;
            })();

            //右边放大框
            (function(){
                function Big(width,height,bigWidth,bigHeight,url){
                   this.width = width;
                   this.height = height;
                   this.bigWidth = bigWidth;
                   this.bigHeight = bigHeight;
                   this.url = url;
                }
                Big.prototype.init = function(){
                   this.createElement();
               }
                Big.prototype.createElement = function(){
                   this.bigBox = document.createElement('div');
                   document.getElementById('head1').appendChild(this.bigBox);
                   this.bigBox.style.width = this.width;
                   this.bigBox.style.height = this.height;
                   this.bigBox.id = 'big';
                   this.imageBox = document.createElement('img');
                   this.imageBox.style.width = this.bigWidth;
                   this.imageBox.style.height = this.bigHeight;
                   this.imageBox.id = 'look';
                   this.imageBox.src = this.url;
                   this.bigBox.appendChild(this.imageBox);
               }
               window.Big = Big;
            })();


            (function(){
                function Large(option){
                    this.width = option.width;
                    this.height = option.height;
                    this.bigWidth = option.bigWidth;
                    this.bigHeight = option.bigHeight;
                    this.url = option.url;
                }
                Large.prototype.init = function(){
                    this.createElement();
                    this.mouseMove();
                }
                Large.prototype.createElement = function(){
                    this.smaller = new Small(this.width,this.height,this.url);
                    console.log(this.smaller)
                    this.smaller.init();
                    this.big = new Big(this.width,this.height,this.bigWidth,this.bigHeight,this.url);
                    this.big.init();
                }
                Large.prototype.mouseMove = function(){
                    this.small = document.getElementById('small');
                    this.bigger = document.getElementById('big');
                    this.move = document.getElementById('move');
                    console.log(move)
                    this.look = document.getElementById('look');
                    this.small.onmousemove = function(event){
                        event = event || window.event;
                        this.small.style.cursor = 'move';
                        var move_left = event.clientX - this.small.offsetLeft - this.move.offsetWidth/2;
                        // 计算move移动块的top值
                        console.log(move_left)
                        var move_top = event.clientY - this.small.offsetTop - this.move.offsetHeight/2;
                        // 超出左边界赋值为0
                        move_left = move_left < 0 ? 0 : move_left;
                        // 超出右边界赋值为盒子宽度-移动块的宽度
                        move_left = move_left > this.small.offsetWidth - this.move.offsetWidth ? this.small.offsetWidth - this.move.offsetWidth : move_left;
                        // 超出上边界赋值为0
                        move_top = move_top < 0 ? 0 : move_top;
            
                        move_top = move_top > this.small.offsetHeight - this.move.offsetHeight ? this.small.offsetHeight - this.move.offsetHeight : move_top;
                        this.move.style.left = move_left + 'px';
                        // console.log(this.move.style.left)
                        this.move.style.top = move_top + 'px';
                    

                        var big_x = move_left/(this.small.offsetWidth-this.move.offsetWidth) * (this.look.offsetWidth-this.bigger.offsetWidth);
                        var big_y = move_top/(this.small.offsetHeight-this.move.offsetHeight) * (this.look.offsetHeight-this.bigger.offsetHeight);
                        // 修改图片定位
                        this.look.style.left = -big_x + 'px';
                        this.look.style.top = -big_y + 'px';
                    }.bind(this);
           
                    this.small.onmouseover = function(){
                        // var move = document.getElementById('move');
                        
                        this.move.style.display = 'block';
                        this.bigger.style.display = 'block';
                        // console.log(this.bigger)
                    }.bind(this);
                
                    this.small.onmouseout = function(){
                        this.move.style.display = 'none';
                        this.bigger.style.display = 'none';
                    }.bind(this);
                }
                window.Large = Large;
            })();
            var lar = new Large(
                {width:'300px',
                height:'200px',
                bigWidth:'600px',
                bigHeight:'400px',
                url:'../新建文件夹/3.jpg'});
            lar.init();
        </script>
</body>
</html>

演示

在这里插入图片描述

出发的星辰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js用面向对象的方法编写放大镜
Jmyeat的博客
03-21 500
文章目录放大镜OOAOODOOP 放大镜 随着网上购物的逐渐火热，放大镜在许多的购物平台，广泛的应用。如下图，是京东商城的放大镜，它对用户查看商品的细节，总用很大 下面让我们来看下如何用面向对象的的方法，来编写它。 OOA 在面向对象的程序编写中：最重要的就是面向对象过程的分析， 元素选择 事件驱动 元素隐藏 小图移动 大图跟随 OOD 面对对象设计：首先建一个构造函数，并且实例化，人后根据O...
js面向对象实现放大镜效果
LE_800820的博客
03-15 288
相信大家都见过某宝，某东或者一些其他的购物商城中的鼠标移入图片，移动放大图片的效果，今天咱就自己写一个，好了废话不多说，直接上代码！（这里使用一张图片的制作方式，大图缩小不影响图片的清晰度） 1.首先做一个基本样式布局以及css样式 html布局 css样式 这里我使用的背景图制作大图显示的方式（直接使用img引入也可以），css及html就不过多叙述 注意：shade和midbox的大小比例必...
js 放大镜（面向对象）
qq_43812504的博客
01-15 429
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>放大镜</title> <script src="util.js"></script>.
JS---放大镜---图片展示（面向对象）
DcTbnk的博客
04-15 552
最终 class Amplify{ constructor(ele,imgArray){ this.ele=ele; this.imgArray=imgArray; this.show=ele.querySelector('.show'); this.mask=ele.querySelector('.mask'); ...
JavaScript 放大镜（面向对象）
qq_45799465的博客
02-09 855
放大镜效果展示： 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面向对象之实现淘宝放大镜
10-15
主要为大家详细介绍了js面向对象之实现淘宝放大镜，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
【JavaScript源代码】JavaScript面向对象实现放大镜案例.docx
12-29
【JavaScript 面向对象实现放大镜案例】 在JavaScript中，面向对象编程是一种常见的编程范式，用于组织和管理代码。在这个案例中，我们将利用面向对象的方法来实现一个动态的放大镜效果，常用于电商网站的产品展示...
jq封装放大镜.rar
06-18
总之，“jq封装放大镜”是一个实用的工具，可以帮助开发者快速实现商品图片的放大效果，同时也是一个很好的学习资源，特别是对于想要提升jQuery和JavaScript技能的新手。通过分析和实践这个插件，你可以掌握更多的...
javascript放大镜效果
05-13
javascript写的放大镜效果， 面向对象，使用，移植，修改都很方便。注释完美！
面向对象封装放大镜js代码
weixin_46500485的博客
09-08 390
面向对象封装放大镜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> * {
JS面向对象——淘宝放大镜实现
进击的葱
01-15 1985
描述： JS面向对象——淘宝放大镜实现 图片的引用是一个大图，一个小图 传输用的ajax，记得改成自己的ip地址，js和html都改一下 效果: 实现： js文件： LoadMethod.js class LoadMethod{ static get LOAD_IMG_FINISH(){ return "load_img_finish"; } ...
放大镜实现（JavaScript面向对象编程）
HAZER644的博客
07-20 925
 放大镜实现 代码有借鉴，侵删 解释移步代码注释 HTML &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;link rel
js面向对象之放大镜效果
weixin_45000814的博客
04-14 190
效果图如下: html文件如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t...
JS放大镜demo详细讲解
a5252145的博客
08-29 7098
前言： 此放大镜可直接改变图片（我是用的是zoom.jpg）使用。前提是必须跟我一样的布局，不然里面的clientX和offsetLeft得作出相应改动。 前提先了解数学算法：     求遮罩层mask宽度       大图、大图显示区、小图、遮罩层     1、小图是大图等比缩放的     2、遮罩层是大图显示区缩放的     小图/大图 = 遮罩层/大图显示区         遮罩层 = ...
JavaScript基础 - 经典案例4 -放大镜 (含公式)
最新发布
never_stop_study的博客
10-06 1057
JavaScript基础 - 经典案例4 -放大镜 (含公式)
面向对象放大镜
BeiBeiTian的博客
11-22 369
                                                    &lt;!DOCTYPE html&gt;                          &lt;html lang="en"&gt;                           &lt;head&gt;                           &lt;meta ...
Js面向对象案例--放大镜效果
weixin_46561466的博客
03-14 230
面向对象 单词全拼是Object Oriented Programming，简称OOP。面向对象不是一种语法，是一种编程的思想。 之前的编程模式：关注每一个元素，然后是他们的顺序，关系...这种编程的模式称之为面向过程。 之后的编程模式：找一个对象来做这件事情，等待结果即可。这就是面向对象。@[TOC](这里写自定义目录标题) 放大镜具体效果 点击小图片，大图随着小图更换； ...
JS-part14.4-面向对象的放大镜
晓葉斑比
09-09 158
JavaScript面向对象的放大镜 面向对象的放大镜 准备构造函数 1. show 盒子 属性: 移入移出事件 2. mask 盒子 属性: 显示隐藏 / 移动 3. enlarge 盒子 属性: 显示隐藏 / 背景图片移动 4. list 盒子 属性: 切换图片 5. 一对方法 <style> *{ margin: 0; padding: 0; } .box{ width: 450px
JavaScript面向对象实现放大镜效果
"这篇文档详细介绍了如何使用JavaScript面向对象编程技术来实现一个放大镜效果，主要涉及鼠标事件处理、坐标计算以及CSS样式布局。" 在JavaScript面向对象编程中，实现放大镜功能通常涉及到以下几个关键知识点： 1...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值