JavaScript特效之放大镜的实现
今天想要给大家分享JavaScript当中的放大镜实现的一些个人心得。
首先我们要知道在进行JS特效制作之前，我们的一个前期思路的分析很重要。
JS特效实现思路是这样：
——>用自己的语言进行功能的描述，尽可能细化，全面
——>根据基本功能，构建结构（HTML）与样式（CSS）
——>针对具体功能的描述，使用JS语言，替代掉我们的语言
——>按照逻辑组合成JS代码，并进行代码优化
我们就以要讲解的放大镜的实现，来进行说明，大家请看下图：
鼠标未移入与鼠标移出时的状态
鼠标移上与鼠标移动时的状态
第一： 我们需要用自己的语言将功能描述出来。
我们从图中可了解这样几个需求，（先解释一下，由于本人不会放置视频，故截了2张图，忘谅解。）
第一张图：鼠标未移入左边图片区域时，右边的大图区域不显示，从左图的紫色圆圈部分可看出，此时鼠标在图片区域的外面。
第二种图：当鼠标移入左边图片区域时，随之右边的大图出现了，且是呈现放大的效果，同时可观察到左图鼠标的位置有一小块透明的区域存在，这个透明区域就像是“放大镜”的角色，当鼠标移到哪个区域，右边图片就随之而变化位置。
综合图一、图二我们可以知道：存在4个不同的动作操控着3种状态：
4个动作为：鼠标未移入、鼠标移上时、鼠标移动、鼠标移出
3个状态：
（1）只有左边图显示，右边不显示——>鼠标未移入与鼠标移出
（2）右边出现大图的图片，同时鼠标样式变为“移动move”状态，且透明小块也出现——>鼠标移上时
（3）鼠标在左图中移动时，右边图片的相对应的区域一起移动且呈现的是大图比例——>鼠标移动
好啦，功能需求分析完，我们来看看具体的结构与样式又是什么样的。
第二、根据基本功能，构建结构（HTML）与样式（CSS）
HTML：
1、设置一个最外层div标签，在里面，左右各放置一个div标签。
2、左边div标签里：需要放置图片，所以加一个img标签，然后考虑当移入到左边图片时，会出现一小块透明的区域（放大镜），因此在div标签里再加入一个div标签。
3、右边div标签里：放置一张图片即可，加入一个img标签。
HTML结构搭建
CSS：
1、我们知道div是块元素，并不能并排显示，但我们此处需要让左右两块，也就是类名为left与right的div标签并排显示，因此我们将让它们浮动float。
2、左边：我们包裹了一个img标签和一个类名为mirror的div标签，我们在鼠标移入和移动过程中，作为放大镜功能的div块是一起移动的，故对它进行定位处理，使用position；再看在鼠标没有移进时，放大镜的初始的默认状态为不显示，则先隐藏（display：none）。
3、右边：我们知道当鼠标移入左图时，它才会显示，故默认的初始状态为隐藏（display：none），再者右边的图片需要呈现放大的效果，那么类名为rightimg的img标签的图片宽高要大于右边的区域，同时需要将超出它父级（类名为right的div）的部分隐藏起来（overflow：hidden，这句设置在父级里）。
CSS样式设置
JS：
第三、针对具体功能的描述，使用JS语言，替代掉我们的语言
首先我们需要知道一下JS语言制作的步骤：
1、获取标签
2、绑定事件
3、获取内容
4、数据转换
5、设置内容
第一步获取标签时，我们怎么考虑获取哪些标签呢？
左边：我们需要获取id名为“left”、“mirror”、“leftimg”的标签
右边：我们需要获取id名为“right”、“rightimg”的标签
标签获取
第二步绑定事件，那我们需要用到的事件有哪些？
鼠标移上——>onmouseover
鼠标移动——>onmousemove
鼠标移出——>onmouseout
我们知道一开始的时候，我们给类名为mirror的标签与右边的标签设置了默认的状态为隐藏（display：none），那当鼠标移上时，它们将出现，所以事件onmouseover为：
onmouseover鼠标移上左边图片时
图中紫色箭头表示：onmouseover是在变量left即左边图片上发生的事件。
同时大家要注意，我们之后的onmousemove动作是在移上图片的前提下进行的，所以看上图是没有关闭的花括号的（红色箭头），因为我们需要将onmousemove的事件写入到当中去。
在进行onmousemove事件前，大家需要了解这样2件事：（1）当鼠标移动时，右边大图是跟着进行位置的改变的，那应该需要有一个放大的比例计算的（2）根据需要一个比例计算，那就需要知道移动的一个位置，因此我们需要能获取到鼠标在图片中的位置。
获取鼠标在页面中的位置，即坐标（x轴值、y轴值），如图：
获取坐标值
此段代码是单独写的，不存放在left.onmouseover = function(e) {}当中的。
同时需要了解几个属性：
xxx.clientX：当前鼠标的x轴值
xxx.clientY：当前鼠标的y轴值
xxx.offsetLeft：获取当前元素与父级元素之间的左侧距离，不包括父级的边框
xxx.offsetTop：获取当前元素与父级元素之间的顶部距离，不包括父级的边框
xxx.offsetWidth：获取元素（含边框）的自身宽度
xxx.offsetHeight：获取元素（含边框）的自身高度
xxx.clientWidth：获取元素（不含边框）的自身宽度
xxx.clientHeight：获取元素（不含边框）的自身高度
xxx.scrollLeft：获取元素的横向移动距离（内容最左端与可视窗口最左端之间的距离）
xxx.scrollTop：获取元素的纵向移动距离（内容最顶端与可视窗口最顶端之间的距离）
放大比例公式;大图（右图）的宽/原图（左图）的宽=大图（右图）横向移动的距离/鼠标停留时距离原图（左图）初点（图片的左上角）的距离
onmousemove鼠标移动时
注意此段代码是放置在left.onmouseover = function(e) {}当中的。
紫色箭头表示：在页面当中移动。
同时需要进行临界值的判断，具体看上图图中的注解。
第三步：获取内容
获取内容
第四步：设置内容（由于此处不需要数据转换）
设置内容
获取内容与设置内容这2段代码都是放置在临界值条件判断之后，left.onmousemove =function(e) {}
现在我们来看最后一个动作onmouseout鼠标移出时的控制是怎样的？
那我们想想之前的分析：鼠标移出时，右边区域不显示，同时放大镜也不显示，且鼠标移动的事件也将没有。
onmouseout鼠标移出时
图中紫色箭头表示：onmouseout是在变量left即左边图片上发生的事件。同时此段代码独立存在。
这样一个放大镜功能就实现了。大家可以动手试试哦。最后一念小编可能描述的不够好的地方，欢迎吐槽。
