【JavaScript】图片放大镜效果(原生JS)

原创 amandakelake 随笔 JavaScript 1528阅读 2017-05-07 09:54:27 举报

先看效果吧,在线地址:图片放大镜

【JavaScript】图片放大镜效果(原生JS)

整体思路:
1、当鼠标移入大盒子box时,显示隐藏的移动块move和大图片框bigimg(大图片框里面包含着大图片bbbimg)
2、获取当前的鼠标位置,并通过计算移动块与鼠标的位置比例,来得到大图片与大图片框框的比例,从而得到大图片的位置,实现放大
下面一步步来,有点耐心就OK了

一、首先是html结构
html 代码

很简单的结构,
一个box大盒子,罩着下面的三个小弟
小弟1:原图片
小弟2:移动的小灰块,叫它move,它来控制显示放大哪块(我做了一张半透明的图片作为它的背景)
小弟3:放大后的图片的活动范围(一个框框),叫它bigimg,这位小弟3也罩着一位小弟bbbimg,这位最小的小弟才是真正放大后的图片

二、CSS结构,也很简单,具体要注意的写在注释里面了
css 代码

三、JS交互事件
先上代码,看不懂代码再继续往下看
javascript 代码

1、首先获取各个元素,这里都看不懂的就不用往下看了
javascript 代码

2、鼠标移入移出时,显示与隐藏move块和大图片框
javascript 代码

3、重点来了,获取位置,先看一张图,你就会轻易知道e.clientX、offsetTop、offsetWidth的区别了

【JavaScript】图片放大镜效果(原生JS)
javascript 代码

然后开始计算move移动块相对于盒子的距离,两个if条件算出的是它的最大和最小值

【JavaScript】图片放大镜效果(原生JS)
javascript 代码

接下来就开始算比例了,用move移动块移动的距离/(盒子的宽度-移动块的宽度)
javascript 代码

然后根据比例计算并设置大图在对应位置的位置,最后要加上-号,
javascript 代码

评论 ( 3 )
最新评论
Script_5 2F 2017-05-10 10:28:12 3F

看懂了,理解错误

Script_5 2017-05-10 10:12:22 2F

var _left = x - l - move.offsetWidth/2; 为什么要剪它自身的高度?为什么不直接减去它自身的一半呢?

许铭汶 2017-05-10 09:01:49 1F

厉害了,mark下,回头好好看= =