js面向对象实现放大镜效果

最新推荐文章于 2022-06-05 18:01:23 发布
最新推荐文章于 2022-06-05 18:01:23 发布
阅读量332 收藏 2
点赞数 2
文章标签： javascript 定位 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LE_800820/article/details/104887328
版权
这篇博客详细介绍了如何使用JavaScript实现常见的购物商城商品图片放大镜效果，包括HTML布局、CSS样式设置以及JavaScript的构造函数和事件处理，通过动态调整背景图片位置，实现鼠标移动时的放大显示。
摘要由CSDN通过智能技术生成

相信大家都见过某宝，某东或者一些其他的购物商城中的鼠标移入图片，移动放大图片的效果，今天咱就自己写一个，好了废话不多说，直接上代码！（这里使用一张图片的制作方式，大图缩小不影响图片的清晰度）
1.首先做一个基本样式布局以及css样式
html布局在这里插入图片描述
css样式
在这里插入图片描述
这里我使用的背景图制作大图显示的方式（直接使用img引入也可以），css及html就不过多叙述
注意：shade和midbox的大小比例必须等于big和背景图片大小的比例，比例不一致会影响背景图片移动距离，从而导致bug
2.js中先自定义一个构造函数，并实例化在这里插入图片描述
3.获取html中需要用到的标签，并将其作为Enlage的一个个属性
解释：this指向的对象地址给pointer（这样使用pointer也能条用Enlage中的方法和属性），并将所有方法写在对象原型中
给midbox写一个鼠标滑入和滑出方法（箭头函数中的this指向的是上一层位置所指向的地址）ps：建议方法一个个写，以防止出错

最低0.47元/天 解锁文章
ke樂
关注
js用面向对象的方法编写放大镜
Jmyeat的博客
03-21 508
文章目录放大镜OOAOODOOP 放大镜 随着网上购物的逐渐火热，放大镜在许多的购物平台，广泛的应用。如下图，是京东商城的放大镜，它对用户查看商品的细节，总用很大 下面让我们来看下如何用面向对象的的方法，来编写它。 OOA 在面向对象的程序编写中：最重要的就是面向对象过程的分析， 元素选择 事件驱动 元素隐藏 小图移动 大图跟随 OOD 面对对象设计：首先建一个构造函数，并且实例化，人后根据O...
JavaScript 放大镜（面向对象）
qq_45799465的博客
02-09 862
放大镜效果展示： 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".
面向对象实现放大镜案例
CJHJK的博客
03-28 496
面向对象实现放大镜 很多电商网站的商品展示都有放大镜的效果，这个效果可以用js面向对象来实现，话不多说直接上代码 html结构 <body> <div class="box"> <div class="middle"> <img src="./images/tu1.jpg" alt=""> ...
JS面向对象——淘宝放大镜实现
进击的葱
01-15 1990
描述： JS面向对象——淘宝放大镜实现 图片的引用是一个大图，一个小图 传输用的ajax，记得改成自己的ip地址，js和html都改一下 效果: 实现： js文件： LoadMethod.js class LoadMethod{ static get LOAD_IMG_FINISH(){ return "load_img_finish"; } ...
js面向对象之实现淘宝放大镜
10-15
主要为大家详细介绍了js面向对象之实现淘宝放大镜，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Js面向对象案例--放大镜效果
weixin_46561466的博客
03-14 252
面向对象 单词全拼是Object Oriented Programming，简称OOP。面向对象不是一种语法，是一种编程的思想。 之前的编程模式：关注每一个元素，然后是他们的顺序，关系...这种编程的模式称之为面向过程。 之后的编程模式：找一个对象来做这件事情，等待结果即可。这就是面向对象。@[TOC](这里写自定义目录标题) 放大镜具体效果 点击小图片，大图随着小图更换； ...
【JavaScript源代码】JavaScript面向对象实现放大镜案例.docx
12-29
【JavaScript 面向对象实现放大镜案例】 在JavaScript中，面向对象编程是一种常见的编程范式，用于组织和管理代码。在这个案例中，我们将利用面向对象的方法来实现一个动态的放大镜效果，常用于电商网站的产品展示...
面向对象实现放大镜
HAI6545的博客
01-06 408
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .container{ width: 100%; margin-top: 400px; } .content{ wid..
JS实现放大镜（面向对象方式）
qq_41679133的博客
07-24 198
代码 <!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>
js 放大镜（面向对象）
qq_43812504的博客
01-15 483
<!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>.
面向对象放大镜
long_yy_的博客
04-15 205
html代码： <style> .enlarge{ width: 400px; height: 502px; border: 1px solid #000; position: relative; } .middle{ width: 400px; height: 400px; border-bottom: 1px solid #000; posi
面向对象-放大镜
Black_Straight的博客
06-05 173
面向对象-放大镜
JS面向对象实例—放大镜
조국화
03-08 178
实例——放大镜 1、分析： 1.选择元素； 2.绑定事件； 3.进入； 显示元素。 4.移动； 遮罩层跟随鼠标移动的同时计算遮罩层的移动比例； 右侧大图，等比例移动； 5.离开； 隐藏元素。 2、HTML布局 3、CSS样式 可根据实际情况做调整，以下仅供参考！ ①main部分 ②s-box部分 ③b-box部分 ④list部分 4、JS行为 ①创建class类，并获取元素。 ②添加事...
js面向对象之放大镜效果
weixin_45000814的博客
04-14 195
效果图如下: html文件如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t...
面向对象实例 放大镜
m0_46374411的博客
03-16 220
面向对象实例—放大镜 一.分析 ： 1.选择元素 2。绑定事件 3.进入 显示元素 4.移动 放大 5离开 隐藏 二、代码
JS-part14.4-面向对象的放大镜
晓葉斑比
09-09 165
JavaScript面向对象的放大镜 面向对象的放大镜 准备构造函数 1. show 盒子 属性: 移入移出事件 2. mask 盒子 属性: 显示隐藏 / 移动 3. enlarge 盒子 属性: 显示隐藏 / 背景图片移动 4. list 盒子 属性: 切换图片 5. 一对方法 <style> *{ margin: 0; padding: 0; } .box{ width: 450px
JavaScript面向对象编程实例——放大镜效果
qq_31152975的博客
03-22 318
今天，我们要实现一个放大镜效果，具体效果如下： 首先，先写结构。 我们需要两个div，分别存放放大前和放大后的图片。 其次就是需要一个可以随着鼠标移动的盒子，表示放大的区域。 为了方便叙述，所以我把存放放大前图片的盒子成为小盒子，存放放大后图片的盒子成为大盒子，随鼠标移动的盒子成为鼠标盒子 /*存放放大前图片的盒子*/ <div class="small"> <img ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值