原生JS实现图片放大镜插件 - 一个柠檬
source link: http://www.cnblogs.com/1996zy/p/7788868.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
前 言
我们大家经常逛各种电商类的网站,商品的细节就需要用到放大镜,这个大家一定不陌生,今天我们就做一个图片放大镜的插件,来看看图片是如何被放大的……
先看一下我们要是实现的最终效果是怎么样的 ↓
看完效果,大家有思路了吗,没有的话,我们一起来看一下是如何实现的~
1实现思路
① 要实现指上后放大的效果,需要做三个div,一个用来放原图,另一个用来放放大效果的div,最后一个是鼠标指上后需要放大部分的div(这个div我们用p标签来代替)。
② 确定放大比例,最重要的一点,鼠标指上的div与放大效果的div,和原图与放大图的比例要相等。
③ 将鼠标指上后的放大效果显示出来。
2具体实现步骤
首先,我们先来建三个div。
<div id="wrapper"> <!--小图--> <div id="img_min"> <!--图片--> <img src="img/11.png" alt="min"> <!--跟随鼠标的白块--> <p id="mousebg"></p> </div> <!--大图--> <div id="img_max"> <img id="img2_img" src="img/11.png" alt="max"> </div> </div>
我们HTML代码部分已经全部完成,接下来,我们用JS来实现功能:
给原图添加三个事件,分别是,鼠标进入,鼠标移动,鼠标移出。
当鼠标移入原图时,鼠标指上时的div和放大效果的div同时显示。
img1.onmouseover = function () { //鼠标进入 img2.style.display = 'block'; mousebg.style.display = 'block'; }
鼠标移出事件:
img1.onmouseout = function () { //鼠标离开 img2.style.display = 'none'; mousebg.style.display = 'none'; }
重点是当鼠标移动时,根据p标签与原图的位置,来显示大图需要放大的部分。
var _event = event||window.event;//兼容性处理 var mouseX = _event.clientX - img1.offsetLeft; //计算鼠标相对与小图的位置 var mouseY = _event.clientY - img1.offsetTop;
在做位置分析时,需要考虑四种临界情况:
就是当鼠标从图片的上、下、左、右刚刚进入时,并且这个距离小于鼠标指上的div宽度的二分之一时,放大效果的div显示出来,并不移动。
//特殊情况处理,分别靠近四条边的时候 if(mouseX<mousebg.offsetWidth/2){ mouseX = mousebg.offsetWidth/2; } if(mouseX>img1.offsetWidth-mousebg.offsetWidth/2){ mouseX = img1.offsetWidth-mousebg.offsetWidth/2; } if(mouseY<mousebg.offsetHeight/2){ mouseY = mousebg.offsetHeight/2; } if(mouseY>img1.offsetHeight-mousebg.offsetHeight/2){ mouseY = img1.offsetHeight-mousebg.offsetHeight/2; }
最后,计算大图的显示范围:
//计算大图的显示范围 img2_img.style.left = -mul*mouseX+img2.offsetWidth/2+"px"; img2_img.style.top = -mul*mouseY+img2.offsetHeight/2+"px"; //使鼠标在白块的中间 mousebg.style.left = mouseX-mousebg.offsetWidth/2+"px"; mousebg.style.top = mouseY-mousebg.offsetHeight/2+"px";
这样,我们用JS实现图片放大镜的插件就全部完成了~
如果有任何疑问,欢迎大家留言指正~
Recommend
-
6
在线编辑图片神器 ProductShot!还能瞬间拥有放大镜效果! 我要投稿 编辑: 土拨鼠
-
64
前言:自己在学习过程中构思的淘宝放大镜的实现,大佬轻喷,小白可以跟我一起探讨学习。话不多说,我们来看效果图。 首先是html结构,结构主要就三块,放大镜,小图和大图区域,我们都用div来实现。 图是在淘宝取的网络地址。 css代码我就不截图了,简单说几个需
-
14
本文主要记录 canvas 在图像、文字处理、离屏技术和放大镜特效的实现过程中使用到的API。先看下效果吧: 一张模糊的图片:
-
0
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助
-
61
-
48
使用过PC端淘宝的人都知道,在淘宝商家的商品展示中有放大镜的功能,简单来说就是如果用户将鼠标放置在图片上,图片的一个区域就会被放大。然后展示在右边,这个功能可以让用户更好的看商品的细节,也比较好玩。 今天我们将来展示这个效果,axure制作这个功能并不...
-
39
但当下的剧集市场,虽然现实题材的作品不少,现实主义的作品却相对匮乏。《小欢喜》的导演汪俊认为:“很多题材很现实,但是拍得很悬浮,可能就是因为缺少细节。要用细节建立真实感。”
-
27
新浪科技讯北京时间12月11日消息,据美国生活科学网站报道,如果人类能够在太空中进行精细的操作,太阳或许有一天能够揭晓遥远行星上是否隐藏着生命形式,目前科学家提出了一个疯狂想法——将太阳作为“放大镜”,搜寻潜在的地外生命。如果把太阳作为引力
-
24
在XAML代码设计器中,添加canvas画布与圆形几何对象,利用VisualBrush笔刷来复制画面内容到指定容器: <Canvas x:Name="CvsGlass" Width="106" Height="106" HorizontalAlignment="Left" VerticalAlignment="Top" MouseW...
-
10
基于 Vue 的商品主图放大镜方案 2019-09-18 发布于 基础...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK