使用纯javascript实现放大镜效果


Posted in Javascript onMarch 18, 2015

jd或者淘宝的具体商品有个放大镜的效果。虽然网上类似插件琳琅满目,应用到项目上有诸多不便,自己抽点时间自己写了个类似插件,积累下代码,何乐而不为呢!!let‘go:

打算把此特效封装成个插件,先把最基本的算法实现,然后再一步步封装吧:

最终实现效果:

html 代码:

<div id="Magnifier"></div>

css 代码:

 <style>

        * {

            margin: 0;

            padding: 0;

        }

    </style>

貌似什么都没有,开始咱们强大的js之旅吧:

javascript 代码:

  function createElement(MagnifierId, sImg, bImg) {

            var Magnifier = $(MagnifierId);

            Magnifier.style.position = 'relative';

            //小图div

            var smallDiv = $Create("div");

            smallDiv.setAttribute("id", "small");

            smallDiv.style.position = "absolute";

            //遮罩层

            var mask = $Create("div");

            mask.setAttribute("id", "mask");

            mask.style.position = "absolute";

            //镜片

            var mirror = $Create("div");

            mirror.setAttribute("id", "mirror");

            mirror.style.opacity = 0.3;

            mirror.style.position = "absolute";

            mirror.style.display = "none";

            //小图

            var smallImg = $Create("img");

            smallImg.setAttribute("src", sImg);

            smallImg.setAttribute("id", "smallImg");

            smallImg.onload = function () {

                //如果没设置放大镜的height或者width 根据小图大小设置放大镜大小

                if (!Magnifier.offsetHeight) {

                    Magnifier.style.width = this.offsetWidth+"px";

                    Magnifier.style.height = this.offsetHeight + "px";

                }

                //遮罩层大小和小图一样

                mask.style.opacity = "0";

                mask.style.width = this.width + 'px';

                mask.style.height = this.height + "px";

                mask.style.zIndex = 2;

                bigDiv.style.left = this.width + 5 + "px";

                bigDiv.style.top = "-5px";

            }

            smallDiv.appendChild(mask);

            smallDiv.appendChild(mirror);

            smallDiv.appendChild(smallImg);

            //视窗

            var bigDiv = $Create("div");

            bigDiv.setAttribute("id", "big");

            bigDiv.style.position = "absolute";

            bigDiv.style.overflow = "hidden";

            bigDiv.style.display = "none";

            var bigImg = $Create("img");

            bigImg.setAttribute("src", bImg);

            bigImg.setAttribute("id", "bigImg");

            bigImg.style.position = "absolute";

            bigDiv.appendChild(bigImg);

            Magnifier.appendChild(smallDiv);

            Magnifier.appendChild(bigDiv);

        }

        function setMagnifierStyle(mirrorStyle,shichuangStyle) {

            //mirror

            for (var item in mirrorStyle) {

                mirror.style[item] = mirrorStyle[item];

            }

            for (var item in shichuangStyle) {

                $("big").style[item] = shichuangStyle[item];

            }

        }

        function registerEvent() {

            $("mask").onmouseover = function () {

                $("big").style.display = "block";

                mirror.style.display = "block";

            }

            $("mask").onmouseout = function () {

                $("big").style.display = "none";

                mirror.style.display = "none";

            }

            $("mask").onmousemove = function (evt) {

                var oEvent = evt || event;

                var disX = oEvent.offsetX;

                var disY = oEvent.offsetY;

                var mirrorLeft = disX - mirror.offsetWidth / 2;

                var mirrorTop = disY - mirror.offsetHeight / 2;

                if (mirrorLeft < 0) {

                    mirrorLeft = 0;

                }

                else if (mirrorLeft > mask.offsetWidth - mirror.offsetWidth) {

                    mirrorLeft = mask.offsetWidth - mirror.offsetWidth;

                }

                if (mirrorTop < 0) {

                    mirrorTop = 0;

                }

                else if (mirrorTop > mask.offsetHeight - mirror.offsetHeight) {

                    mirrorTop = mask.offsetHeight - mirror.offsetHeight;

                }

                mirror.style.top = mirrorTop + "px";

                mirror.style.left = mirrorLeft + "px";

                var paX = mirrorTop / (mask.offsetHeight - mirror.offsetHeight);

                var paY = mirrorLeft / (mask.offsetWidth - mirror.offsetWidth);

                $("bigImg").style.top = -paX * ($("bigImg").offsetHeight - $("big").offsetHeight) + "px";

                $("bigImg").style.left = -paY * ($("bigImg").offsetWidth - $("big").offsetWidth) + "px";

            }

        }

        function $(id) {

            return document.getElementById(id);

        }

        function $Create(type) {

            return document.createElement(type);

        }

最后再 onload小小的调用一下:

 window.onload = function () {

            createElement("Magnifier", "images/Magnifier/small.jpg", "images/Magnifier/big.jpg");

            setMagnifierStyle({ "width": "30px", "height": "30px", "backgroundColor": "#fff" }, { "width": "250px", "height": "250px" });

            registerEvent();

        }

效果总算出来了耶,

2. 接下来咱们封装吧:

Magnifer类代码:

        function Magnifier(

            MagnifierId,                            //放大镜容器ID

            sImg,                                   //小图片src

            bImg,                                   //大图片src

            mirrorStyle,                            //小图片里镜片样式,json格式数据

            ViewStyle                               //预览视窗样式,json格式数据

            ) {

            var _this = this;

            this.MagnifierContainer = null;         //容器

            this.smallDiv = null;                   //小图容器

            this.mask = null;                       //小图遮罩层

            this.mirror = null;                     //小图镜片

            this.smallImg = null;                   //小图

            this.bigDiv = null;                     //预览视图

            this.bigImg = null;                     //大图

            var init = function () {

                _this.MagnifierContainer = _this.$(MagnifierId);

                _this.createElement(sImg, bImg);

                _this.setMagnifierStyle(mirrorStyle, ViewStyle);

                _this.MainEvent();

            }

            init();

        }

        Magnifier.prototype.createElement = function (sImg, bImg) {

            var _this = this;

            var $Create = this.$Create;

            this.MagnifierContainer.style.position = 'relative';   //脱离文档流,视情况修改

            this.smallDiv = $Create("div");

            this.smallDiv.setAttribute("id", "small");

            this.smallDiv.style.position = "absolute";

            this.mask = $Create("div");

            this.mask.setAttribute("id", "mask");

            this.mask.style.position = "absolute";

            this.mirror = $Create("div");

            this.mirror.setAttribute("id", "mirror");

            this.mirror.style.opacity = 0.3;

            this.mirror.style.position = "absolute";

            this.mirror.style.display = "none";

            this.smallImg = $Create("img");

            this.smallImg.setAttribute("src", sImg);

            this.smallImg.setAttribute("id", "smallImg");

            this.smallImg.onload = function () {

                //如果没设置放大镜的height或者width 根据小图大小设置放大镜大小

                if (!_this.MagnifierContainer.offsetHeight) {

                    _this.MagnifierContainer.style.width = this.offsetWidth + "px";

                    _this.MagnifierContainer.style.height = this.offsetHeight + "px";

                }

                //遮罩层大小和小图一样

                _this.mask.style.opacity = "0";

                _this.mask.style.width = this.offsetWidth + 'px';

                _this.mask.style.height = this.offsetHeight + "px";

                _this.mask.style.zIndex = 2;

                _this.bigDiv.style.left = this.offsetWidth + 5 + "px";

                _this.bigDiv.style.top = "-5px";

            }

            this.smallDiv.appendChild(this.mask);

            this.smallDiv.appendChild(this.mirror);

            this.smallDiv.appendChild(this.smallImg);

            this.bigDiv = $Create("div");

            this.bigDiv.setAttribute("id", "big");

            this.bigDiv.style.position = "absolute";

            this.bigDiv.style.overflow = "hidden";

            this.bigDiv.style.display = "none";

            this.bigImg = $Create("img");

            this.bigImg.setAttribute("src", bImg);

            this.bigImg.setAttribute("id", "bigImg");

            this.bigImg.style.position = "absolute";

            this.bigDiv.appendChild(this.bigImg);

            this.MagnifierContainer.appendChild(this.smallDiv);

            this.MagnifierContainer.appendChild(this.bigDiv);

        }

        Magnifier.prototype.setMagnifierStyle = function (mirrorStyle, ViewStyle) {

            for (var item in mirrorStyle) {

                this.mirror.style[item] = mirrorStyle[item];

            }

            delete item;

            for (var item in ViewStyle) {

                this.bigDiv.style[item] = ViewStyle[item];

            }

        }

        Magnifier.prototype.MainEvent = function () {

            var _this = this;

            this.mask.onmouseover = function () {

                _this.bigDiv.style.display = "block";

                _this.mirror.style.display = "block";

            }

            this.mask.onmouseout = function () {

                _this.bigDiv.style.display = "none";

                _this.mirror.style.display = "none";

            }

            this.mask.onmousemove = function (evt) {

                var oEvent = evt || event;

                var disX = oEvent.offsetX || oEvent.layerX;  //兼容ff

                var disY = oEvent.offsetY || oEvent.layerY;

                var mirrorLeft = disX - _this.mirror.offsetWidth / 2;

                var mirrorTop = disY - _this.mirror.offsetHeight / 2;

                if (mirrorLeft < 0) {

                    mirrorLeft = 0;

                }

                else if (mirrorLeft > this.offsetWidth - _this.mirror.offsetWidth) {

                    mirrorLeft = this.offsetWidth - mirror.offsetWidth;

                }

                if (mirrorTop < 0) {

                    mirrorTop = 0;

                }

                else if (mirrorTop > this.offsetHeight - _this.mirror.offsetHeight) {

                    mirrorTop = this.offsetHeight - _this.mirror.offsetHeight;

                }

                _this.mirror.style.top = mirrorTop + "px";

                _this.mirror.style.left = mirrorLeft + "px";

                var paX = mirrorTop / (this.offsetHeight - _this.mirror.offsetHeight);

                var paY = mirrorLeft / (this.offsetWidth - _this.mirror.offsetWidth);

                _this.bigImg.style.top = -paX * (_this.bigImg.offsetHeight - _this.bigDiv.offsetHeight) + "px";

                _this.bigImg.style.left = -paY * (_this.bigImg.offsetWidth - _this.bigDiv.offsetWidth) + "px";

            }

        }

        Magnifier.prototype.$ = function (id) {

            return document.getElementById(id);

        }

        Magnifier.prototype.$Create = function (type) {

            return document.createElement(type);

        }

最后在onload调用下:

window.onload = function () {

            new Magnifier(

                        "Magnifier",

                        "images/Magnifier/small.jpg",

                        "images/Magnifier/big.jpg",

                        { "width": "30px", "height": "30px", "backgroundColor": "#fff" },

                        { "width": "250px", "height": "250px" }

                );

        }

以上就是本文所述的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
Jan 15 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
Feb 03 Javascript
jquery遍历数组与筛选数组的方法
Nov 05 Javascript
HTTP 304错误的详细讲解
Nov 13 Javascript
浅析JavaScript中的类型和对象
Nov 29 Javascript
jQuery中replaceWith()方法用法实例
Dec 25 Javascript
jqGrid中文文档之选项设置
Dec 02 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
Jun 21 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
vue的token刷新处理的方法
Jul 17 Javascript
js打开word文档预览操作示例【不是下载】
May 23 Javascript
JavaScript实现手风琴效果
Feb 18 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
Mar 18 #Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 #Javascript
jQuery实现按键盘方向键翻页特效
Mar 18 #Javascript
javascript操作Cookie(设置、读取、删除)方法详解
Mar 18 #Javascript
jQuery选择id属性带有点符号元素的方法
Mar 17 #Javascript
jQuery统计指定子元素数量的方法
Mar 17 #Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 #Javascript
You might like
PHP实现定时生成HTML网站首页实例代码
2008/11/20 PHP
PHP将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
解析php获取字符串的编码格式的方法(函数)
2013/06/21 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
微信小程序发送订阅消息的方法(php 为例)
2019/10/30 PHP
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
2017/06/09 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
vue debug 二种方法
2018/09/16 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
python正则表达式re之compile函数解析
2017/10/25 Python
python3使用matplotlib绘制条形图
2020/03/25 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
最新pycharm安装教程
2020/11/18 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
什么是servlet链?
2014/07/13 面试题
会计毕业生自荐信
2013/11/21 职场文书
奥巴马经典演讲稿
2014/09/13 职场文书
离婚财产处理协议书
2014/09/30 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS