JavaScript鼠标事件中使用client实现图片放大镜效果

已于 2022-03-11 21:37:09 修改
阅读量1k 收藏 2
点赞数 3
文章标签： javascript css html 前端
于 2022-03-11 21:29:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_66970593/article/details/123434084
版权

效果图如下

 

首先我们先写好html和css样式

 

css样式

我们大图和小图使用的一张图片，这里需要注意的是

蒙版/小图=大图的div/大图

我们主要分析一下js如何写

1.让蒙版和大图显示出来

2.当鼠标移动的时候获取鼠标在小图上的的位置

3.计算最大值和最小值

4.定位大图片

难点就是大图移动的距离=蒙版移动的距离/蒙版最大移动距离*大图最大移动距离

需要注意的是大图移动和蒙版的移动距离是反方向

5.不要忘记当鼠标移出小图的时候蒙版和大图消失

高莘莘
关注
JavaScript实现淘宝图片放大镜效果
m0_46562003的博客
03-14 994
效果图如下： 下面是html、css、js整合在一起的代码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>Document</title> </head> <style> .middle{ width: 400px; ...
利用js实现放大镜
hhazjyh5210的博客
08-29 626
纯js实现 放大镜功能
JavaScript实现鼠标移入图片放大效果
11-19
JavaScript实现鼠标移入图片放大效果，JavaScript实现鼠标移入图片放大效果，好东西大家共享
鼠标经过图片放大图片-js脚本特效.rar
07-10
JS脚本特效，实现鼠标移动放大图片，类似于一个图片放大镜。当移动鼠标时，会在右侧缩略图中生成一个边框以确定放大位置，然后随着你的鼠标移动左侧经放大的图像显示出来，看上去很逼真。
Js实现鼠标悬停放大图片.rar
07-10
Js实现鼠标悬停放大图片，当鼠标放在图片上的时候，图片慢慢的放大显示，鼠标移走后，图片恢复至缩略图模式，使用了expando.js JS封装类。
php鼠标移过图片放大代码,鼠标移到图片上变大显示而不是放大镜效果
weixin_35851553的博客
03-22 217
ToopTip.js:function getViewportHeight() {if (window.innerHeight!=window.undefined) return window.innerHeight;if (document.compatMode=='CSS1Compat') return document.documentElement.clientHeight;if (doc...
鼠标移到图片上变大显示而不是放大镜效果
12-11
ToopTip.js: 代码如下: function getViewportHeight() { if (window.innerHeight!=window.undefined) return window.innerHeight; if (document.compatMode==’CSS1Compat’) return document.documentElement.clientHeight; if (document.body) return document.body.clientHeight; return window.undefined; } function getVie
原生js实现放大镜效果
10-20
实现放大镜效果的完整JavaScript代码可能涉及较为复杂的计算和DOM操作，需要注意鼠标位置与放大镜窗口图片显示之间的对应关系。实现时，通常需要考虑边界条件，比如鼠标移动到图片边缘时的处理，以及放大效果的最大...
放大镜实现（JavaScript面向对象编程）
HAZER644的博客
07-20 942
 放大镜实现 代码有借鉴，侵删 解释移步代码注释 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
PC端网页特效（offset 系列、client系列、scroll系列、mouseenter鼠标事件）
qq_44659171的博客
09-29 692
.
用JS写出JS事件中京东图片放大特效
m0_53911328的博客
05-06 366
图片放大特效 准备两张相同的图片，小图和大图。 小图显示在商品的展示区域。 大图用于鼠标在小图上移动时，按比例的显示大图中的对应区域。 编写HTML页面，展示小图、隐藏鼠标的遮罩及大图。 当鼠标在小图上移动时，显示鼠标的遮罩和大图。 当鼠标移动时，让遮罩跟着在小图中进行移动。 限定遮罩在小图中的可移动范围。 根据遮罩在小图中的覆盖范围，按比例的显示大图。 CSS页面代码： <style > * { .
用JS来实现鼠标移入图片放大的效果
最新发布
weixin_62226037的博客
11-14 2864
【代码】用JS来实现鼠标移入图片放大的效果。
前端事件练习之放大镜的实现
weixin_49419076的博客
02-26 484
首先确认我们需要多少个元素--1、图片，2、遮罩，3、放大后的图片； 然后确认需要几种状态--1、鼠标进入，2、鼠标移动，3、鼠标退出 图片的话，直接一个div，将图片设置为背景图片 <div class="img" style="background-image:url(img/td.jpg)"> script部分，首先我们需要获取/定义3个元素 var img = document.querySelector('.img'); var zhezhao = nu
js-鼠标事件-放大镜效果
qq_25503949的博客
04-26 845
js-鼠标事件-放大镜效果 事前准备 两张长宽比1：2的图 css部分 1.外部一个大盒子 2.里面有两个等宽高的小盒子（小盒子宽高跟小图片一样大） 分别装两个图片，且分别浮动在左右两侧 3.给装大图片的小盒子一个overflow：hidden，且给大图片定位在小盒子的左上角，为什么要定位，后面会讲到。 4.再向装小图片的小盒子中定位一个b标记（代表放大镜的位置）暂时定位到左上角 <st...
js实现商城特效---鼠标移入图片放大
lzsan_的博客
05-23 2624
figure里放商品的图片，为背景图 ul里存放商品的缩小图 div.big里放放大的图片 <div class="scale"> <figure> <div class="scale-drag"></div> </figure> <ul> <li><img src="./images/test1.png"
js鼠标经过指定位置，图片放大的效果
nuanpang的博客
07-13 771
js鼠标经过指定位置，图片放大的效果
jq/css鼠标经过图片放大效果
热门推荐
一只程序媛
01-16 1万+
<!doctype html> <html> <head> <style> img{display:block;} .box{width:200px;border:solid 2px gray;height:160px;overflow:hidden;} .box img{width:200px;height:160px;position:relative;} </style> <script sr
JavaScript - 京东放大镜效果：鼠标移动查看图片放大细节
Codefreyy
03-21 1355
效果 JS代码 window.addEventListener('load', function () { //获取元素 var small = document.querySelector('.preview-img'); var big = document.querySelector('.belt'); var mask = document.querySelector('.mask'); var img = document.querySelecto
js鼠标经过放大图片/两个形式 超级无敌简单
weixin_41475854的博客
06-01 8742
1.利用css3 transition/transform 特性&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt;
JavaScript实现图片放大镜效果详解
这个方法是实现放大效果的核心，它会根据鼠标的位置来调整放大镜的显示，使得放大镜下的部分与原图对应的部分保持一致。可能需要计算放大倍数、截取源图片对应部分并显示在放大镜中。 4. `end`：当鼠标离开`...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值