使用纯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 相关文章推荐
JavaScript 开发工具webstrom使用指南
Dec 09 Javascript
14个有用的Jquery技巧分享
Jan 08 Javascript
Javascript中的arguments与重载介绍
Mar 15 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
May 30 Javascript
Bootstrap对话框使用实例讲解
Sep 24 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
js脚本编写简单刷票投票系统
Jun 27 Javascript
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 11 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桌面中心(二) 数据库写入
2007/03/11 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
javascript Array.prototype.slice的使用示例
2013/11/14 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
js实现String.Fomat的实例代码
2016/09/02 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
vue实现的仿淘宝购物车功能详解
2019/01/27 Javascript
js实现蒙版效果
2020/01/11 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
Python装饰器模式定义与用法分析
2018/08/06 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
python实现的config文件读写功能示例
2019/09/24 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
华为俄罗斯官方网上商城:购买Huawei手机和平板
2017/04/21 全球购物
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
2013年员工自我评价范文
2013/12/27 职场文书
小学班干部竞选演讲稿
2014/04/24 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android