用js写出一个简单的放大镜操作

于 2023-03-25 16:40:37 发布
阅读量176 收藏
点赞数
文章标签： html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xin_sho/article/details/129767598
版权

一,首先要做一个放大镜的效果出来我们得有相同的一大一小俩张图例如我这样的:

 

 实际我的这俩张一大一小图要比放上来的更大为了美观所以进行了调整这种图片可以去淘宝京东里面复制,然后可以去观察淘宝的放大效果可以发现这个效果大致可以分为俩个大盒子装大小俩张图,并且鼠标在小图上面的时候会有一个黄色半透明的幕布效果

并且不管怎么移动你会发现你的鼠标都在幕布中间因此我们只要获取鼠标位置和幕布左上角的位置即可移动幕布,因此以此思路开始搭建html基础结构,我的html代码如下 :

 css样式:

以及效果: 

二.在搭好基本的样式之后我们再考虑如何获得鼠标点击时候的位置这个地方可以用到事件对象的offset方式获取到鼠标的位置: 

在获取到鼠标位置之后我们在去计算当鼠标在某个位置时候幕布左上角的位置,而由于鼠标一直是在幕布中心所以它的位置x等于鼠标的x轴位置减去幕布宽度的一半,同理y轴等于鼠标y轴减去幕布高度的一半因此我们可以得出以下代码: 

 这就是幕布每次在鼠标移动时跟随移动的距离了,然后我们再把这俩个值通过

div_mask.style["left"] = x1 + "px";

 div_mask.style["top"] = y1 + "px";

注释:在这个时候移动幕布发现会来回闪烁移动回原点这是由于幕布被鼠标事件影响了可以通过给幕布的css样式里加上一个pointer-events: none;即可解决

赋给幕布即可,然而这个时候我们移动的时候会发现幕布在鼠标移出小图盒子范围之后跟着出去了这个可以通过if语句判断幕布的x,y轴在左边移动是否小于零如果小于则给他拉回来,右边的时候判断左上角点的x,y轴是否超过小图盒子宽度的一半如果超过也给它拉回来而他们的宽度,高度可以通过offsetWidth,offsetHeight获得即可

三.这个时候我们再来看大图,大图的大小由于是由小图经过放大获得的因此在大图要跟随幕布移动的时候其移动的x,y轴距离应该要乘以放大倍数,因此我们应要想办法获取它的放大倍数而它的放大倍数也等于大图宽除以小图的宽,但是由于网页加载是先加载代码的所以我们不能直接获取到俩个图片的值,因此我们可以通过window.onload获取,具体代码如下:

然后我们在跟幕布一样在获取到的幕布的x1,y1数据基础上乘以倍数赋予大图即可: 

img_big.style["margin-left"] = -x1 * bei + "px";

img_big.style["margin-top"] = -y1 * bei + "px";

这个时候查看效果发现已经实现,而如果你想要幕布在鼠标不在上面或者移出它的范围后消失可以通过style设置显示隐藏即可

代码整体样式和效果如下:

 

 

 

 

你干嘛 诶哟~
关注
js淘宝放大镜效果代码
04-11
js淘宝放大镜效果代码
js图片放大镜特效代码
Cason2014的专栏
04-24 259
1 <script language="JavaScript"> 2 <!-- 3 var srcX = 1024; //原图长宽 4 var srcY = 768; 5 var bigX = 500; //原比例预览大小,可以设置成任意大小 6 var bigY = 300; 7 var smallX = 256; //缩略图大小,要与原...
js实现放大镜效果代码
爬不动的猫的博客
07-28 2251
js实现放大镜效果代码 html代码： <div id="box" > <div id="small"><!-- 小图片所在的盒子 --> <img src="001.jpg" alt="" /><!-- 小图片:350*350 --> <div id="mask"></div><!-- 遮罩层:175*175 --> </div> <div id="big
JS代码实现放大镜的效果
weixin_44220528的博客
03-13 276
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; img{ display: block; border
图片放大镜效果js代码
weixin_48462578的博客
04-05 543
图片放大镜效果js代码，需要引入jquery <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jq.js" type="text/javascript" charset="utf-8"></script> <style> .sbox{ width:4.
原生js实现放大镜特效
10-20
在本文中，我们将探讨如何使用原生JavaScript实现一个放大镜特效，这种效果常用于电商网站的产品图片展示，让用户能更清晰地查看商品细节。首先，我们要理解放大镜特效的关键原理和涉及到的技术点。 **放大镜特效...
超详细原生js实现一个放大镜效果
梅花寺
11-02 648
以上就是实现一个放大镜的全部内容附上gitHub地址：欢迎来踩整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。 **图片移动的关键:** 移动的图片使用：绝对定位（注意子绝父相。
JavaScript实现放大镜效果
teemology的博客
02-18 982
需求分析 要求做一个如图示的放大镜，鼠标随动，右击时开启关闭，含过渡动画。 大体的思路就是绑定鼠标事件，动态地修改background-position，难点在于background-position的计算要考虑周全。 开关动画部分我们选择用transform: scale()来实现，相对于改width / height而言，transform做过渡时可以结合transform-origin解决圆...
Jquery实现图片放大镜效果的思路及代码(自写)
10-26
标题中的“Jquery实现图片放大镜效果”是指利用jQuery库来创建一种交互式的图像查看功能，使得用户在鼠标悬停于图片上时，能看到图片的一个局部区域被放大，以提供更详细的视图。这种效果常见于电子商务网站的商品...
用JS实现PC端淘宝查看商品图片放大镜效果
L_u_c_k_y_m_a_n的博客
06-25 1983
实现放大镜功能一、前言二、图示淘宝商品放大镜效果三、需要掌握的知识点四、放大镜实现原理五、放大镜代码及注释六、放大镜最终成果七、放大镜源码八、总结 一、前言         今天翻阅文件夹看到了之前写过的一个 js 放大镜特效.之所以想要发布在博客上,是因为觉得这个特效里面包含有一定量程度的 js 常用知识点和逻辑性,觉得发出来挺好的,我自己也能在复习掌握一下.我们废话不多说,开整! 二、图示淘宝商品放大镜效果  &n
通过js代码实现图片切换和放大镜等效果
10-14
通过以上代码实现图片的切换和放大镜的效果 本代码是针对京东商城的手机详情页做的 通过移动手机的小图片可以切换不同的大图片 同时当鼠标放在大图片上时可以实现放大效果 分享给初学者！
JS实现放大镜效果
kw8682202的博客
03-14 201
首先确定要实现的效果的结构。 上面是一大图，下面有两个小图，点击小图可以切换大图。鼠标放大左边展示大图上时，会出现一个半透明的黄色框，并且随着鼠标的移动右面的图片会跟随出现对面的图像显示。 用html写出基本结构并用css修饰，如下： <!doctype html> <html> <head> <meta charset="utf-8"> <...
js实现放大镜效果
个人笔记
03-29 941
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } /*最后一个坑*/ html, body{ width: 100%; height: 3000px; }
用js写一个放大镜的案例
最新发布
09-24
### 回答1： 下面是一个使用 JavaScript 实现放大镜效果的示例： HTML代码： ``` <div id="container"> <img src="image.jpg" id="image"> <div id="magnifying-glass"></div> </div> ``` CSS代码： ``` #container { position: relative; width: 500px; height: 400px; } #image { width: 100%; height: 100%; } #magnifying-glass { width: 100px; height: 100px; background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; position: absolute; display: none; } ``` JavaScript代码： ``` const container = document.getElementById("container"); const image = document.getElementById("image"); const magnifyingGlass = document.getElementById("magnifying-glass"); container.addEventListener("mousemove", function(event) { magnifyingGlass.style.display = "block"; magnifyingGlass.style.left = event.pageX - 50 + "px"; magnifyingGlass.style.top = event.pageY - 50 + "px"; let x = event.layerX; let y = event.layerY; magnifyingGlass.style.backgroundPosition = `-${x * 2}px -${y * 2}px`; }); container.addEventListener("mouseout", function() { magnifyingGlass.style.display = "none"; }); ``` 上面的代码实现了一个简单的放大镜效果。 ### 回答2： 放大镜是一种常见的网页交互效果，可以让用户在鼠标悬停或点击某个元素上时，通过放大显示该元素的细节和细微的部分。下面是一个用JavaScript编写的简单放大镜案例： 首先，需要在HTML中创建一个放大镜容器和一个被放大的图像容器。放大镜容器是一个div元素，通过设置其样式来控制放大镜的尺寸和位置。被放大的图像容器可以是一个img元素，通过设置其src属性来加载需要被放大的图片。 然后，通过JavaScript获取放大镜容器和被放大的图像容器的引用，并添加鼠标事件监听器。在鼠标移动事件中，通过获取鼠标相对于被放大图像容器的位置，来计算放大镜显示的位置。 在事件处理程序中，可以根据鼠标在被放大图像容器中的位置，计算出放大镜显示的位置。可以通过修改放大镜容器的背景图片以及位置来显示放大图像。同时，设置放大镜容器的尺寸为被放大图像容器的一定倍数，可以实现放大镜效果。 最后，为了让放大镜随着鼠标的移动而移动，需要在文档的mousemove事件中更新放大镜容器的位置。 这是一个简单的用JavaScript实现的放大镜案例。还可以根据具体需求进行改进和优化，如添加特效、放大镜形状等。 ### 回答3： 放大镜是一种常见的网站功能，它允许用户在浏览图片时能够放大并查看细节。以下是一个使用JavaScript实现的简单放大镜案例。 首先，在HTML中创建一个包含放大镜功能的元素。该元素包含两张图片，一张是原始图片，另一张是放大的图片。通过CSS将放大的图片的位置设为绝对，并将其初始大小设为原始图片的2倍。 ```html <div class="magnifier"> <img id="original-image" src="original.jpg" alt="原始图片"> <div id="magnified-image" style="background-image: url('magnified.jpg');"></div> </div> ``` 然后，使用JavaScript来实现放大镜功能。首先，获取原始图片和放大镜元素。 ```javascript var originalImage = document.getElementById('original-image'); var magnifier = document.querySelector('.magnifier'); ``` 然后，给原始图片添加鼠标移动事件监听器，以便在移动鼠标时更新放大镜的位置和放大的图片。 ```javascript originalImage.addEventListener('mousemove', function(event) { var originalImageRect = originalImage.getBoundingClientRect(); var offsetX = event.clientX - originalImageRect.left; var offsetY = event.clientY - originalImageRect.top; var magnifierSize = magnifier.offsetWidth / 2; var magnifierX = offsetX - magnifierSize; var magnifierY = offsetY - magnifierSize; magnifier.style.left = magnifierX + 'px'; magnifier.style.top = magnifierY + 'px'; var magnifiedImage = document.getElementById('magnified-image'); magnifiedImage.style.backgroundPosition = -magnifierX + 'px ' + -magnifierY + 'px'; }); ``` 最后，使用CSS将放大镜元素进行样式设置。 ```css .magnifier { position: relative; } .magnifier img { display: block; width: 100%; height: auto; } .magnifier div { position: absolute; width: 200px; height: 200px; border: 1px solid #000; background-size: cover; pointer-events: none; opacity: 0.7; } ``` 通过以上代码实现了基本的放大镜功能。当鼠标在原始图片上移动时，放大镜会根据鼠标位置更新自身的位置，并通过改变放大的图片的背景位置来实现放大效果。可以通过修改CSS样式和JavaScript代码来进一步定制和优化这个放大镜的案例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值