JS实现鼠标中心放大图片功能原理及实例演示

在制作网页的过程中，特别是对于浏览图片的网页，难免会涉及实现图片放大缩小及拖拽的功能，一般上述的功能很好实现，但是很多小伙伴发现其实有一个东西很难搞，那就是如何实现鼠标中心放大图片功能？

首先，我要讲一下这一功能的数学原理：

上图是图片放大的效果图，对此，说明一下图中的参数：

图中，十字代表鼠标光标的位置，
zrX：鼠标到原图左边距，
zrY：鼠标到原图顶边距，
zrX’：鼠标到放大图左边距，
zrY’：鼠标到放大图顶边距，

mL: 原图左边缘到Frame左边距，
mT: 原图上边缘到Frame顶边距，
mL’：放大图左边缘到Frame左边距，
mT’ : 放大图上边缘到Frame顶边距。

好了，首先像一个问题，该功能，我通过何种方法实现？

如果图片以鼠标所在点为中心放大或缩小，图片四边将会各自想外扩张，也就是将会有不同的增量，这样导致放大后的图片在Frame中的位置与之前不同，通过设置放大前与放大后图片的位置即可实现该功能。

那么，通过什么来定位呢？

通过上述的两个参数mT和mL也就是图片上边缘到Frame顶边距以及图片的左边到Frame左边距。这道几何题最后要求的就是放大后的mL’以及mT’。

如何求上述的两个值？

首先我们要搞清楚哪些是已知的，哪些是未知的：

在onmousewheel事件的情况下，获取event对象，
zrX：鼠标到原图左边距，event.zrX
zrY：鼠标到原图顶边距，event.zrY

获取图片所在的dom对象img
mL: 原图左边缘到Frame左边距，img.offsetLeft
mT: 原图上边缘到Frame顶边距，img.offsetTop

原图尺寸：img.width和img.height
放大系数：λ（手动输入）
放大图尺寸：img.width’和img.height’

img.width’ = λ · img.width
img.height’ = λ · img.height

以下是未知参数：

zrX’：鼠标到放大图左边距，
zrY’：鼠标到放大图顶边距，
mL’：放大图左边缘到Frame左边距，
mT’ : 放大图上边缘到Frame顶边距。

如何求上述未知参数？

首先通过对比关系得出zrX与zrX’及zrY与zrY’的关系式：

其次，通过鼠标对于Frame的相对位置不变的关系建立mL，mL’, mT, mT’的等式:

最后通过上述等式得出mL’与mT’的表达式：

这样就能求出图片放大的后的位置，至于缩小情况，不再赘述，只要把放大图作为原图，之前的原图作为缩小图即可，上述等式依然可用。

接下来是实例演示：

JS实现鼠标中心放大图片功能原理及实例演示相关推荐

html鼠标悬浮更换图片,Vue.js鼠标悬浮更换图片功能
最近自己做的项目中设计师要求分类栏中鼠标悬停更换图片,大致实现出来的效果就是这样: 这个在jQuery中是个很简单的事,但是在vue中我还是第一次实现. 首先将所有的选中后图片都覆盖到没选中图片上 c ...
Viewer.js点击按钮放大图片用法
1.Viewer.js点击按钮放大图片用法 <div onclick="getHideBig('hide_img_weight1')" id="btn_img_we ...
html怎么鼠标经过添加蒙版遮罩,js实现鼠标移动到图片产生遮罩效果
本文实例为大家分享了js实现鼠标移动到图片产生遮罩效果的具体代码,供大家参考,具体内容如下 mask .pic{ width:300px; height:250px; background:url(i ...
用vue实现，鼠标悬停放大图片，根据鼠标位置倾斜图片网页源码
大家好,今天给大家介绍一款,用vue实现的,鼠标悬停放大图片,并根据鼠标位置倾斜图片前端网页源码(图1).送给大家哦,获取方式在本文末尾. 图1 鼠标悬停放大图片,鼠标移动图片就会进行相应角度的倾斜, ...
php获取网络图片的大小,PHP获取远程图片尺寸和大小实例演示
这篇文章主要为大家详细介绍了PHP获取远程图片尺寸和大小实例演示,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴. PHP功能强大,今天361源码给大家介绍的是: ...
python打开word并插入图片_Python操作word文档插入图片和表格的实例演示
前言图片是Word的一种特殊内容,这篇文章主要介绍了关于Python操作word文档,向里面插入图片和表格的相关内容,下面话不多说了,来一起看看详细的代码实例代码: # -*- coding: U ...
php怎么在表格里插图片,Python操作word文档插入图片和表格的实例演示
今天带来Python操作word文档插入图片和表格的实例演示教程详解前言图片是Word的一种特殊内容,这篇文章主要介绍了关于Python操作word文档,向里面插入图片和表格的相关内容,下面话不多 ...
html 图片滚动放大缩小,js实现图片旋转 js滚动鼠标中间对图片放大缩小
从开通博客园到今天,有两个多月了.我发现之前没有开通博客记录自己所做的东西,真是后悔啊. 现在一点一点把自己所做的功能以博客的形式记录下来,一方面可以给大家分享,大家一起学习,同时自己也从新回顾一下. ...
php 鼠标点击图片放大,鼠标移入放大图片预览效果实现
商城项目中,有鼠标移入图片放大的功能,研究一下实现 Image zoom body { display: flex; justify-content: center; align-items: cen ...

JS实现鼠标中心放大图片功能原理及实例演示

JS实现鼠标中心放大图片功能原理及实例演示相关推荐

最新文章

热门文章