JS实现放大镜小插件

369 阅读2分钟

          在浏览淘宝网页的时候,观看商品的时候是不是很好奇怎样做到的将鼠标放上的时候图片放大,是不是想自己尝试一下,今天我就给大家介绍如何用js实现放大镜小插件。

          首先对放大镜进行OOA(面向对象分析):

          在分析完放大镜的功能需求之后进行更进一步的实现即OOD(面向对象设计):

          那么再设计之后我们要进行的就是具体实现功能,通过对各个功能的具体编写,来获得我们想要的到插件.

                    首先是初始化功能,通过初始化功能我们要实现的是对各个功能的调用使插件能够运行起来:

                    在初始功能中我们首先要获取元素才能对函数进行js操作,那么初始化功能之后就是元素选择功能:

                    获取元素的目的是为了操作元素,那么在这个小插件里面我们如何操作元素呢,放大镜功能的开启当然是要在鼠标放到图片之后才会运行,接下来要做的就是给元素添加事件:

                    放大镜其实就像变魔术,并不是真的将图片放大在右边显示,而是在右边放置了一个大图,在触发事件的时候,将图片显示,在没有触发时隐藏图片:

                    当然但但把大图显示出来不够,我们还要在鼠标在原图移动的时候设置大图也产生相应的移动才行:

          最后要做的就是创建实例对象:

          那么这就是我今天的分享,js实现放大镜小插件了