使用纯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关闭当前页面(窗口)不带任何提示
Mar 26 Javascript
jQuery.holdReady()方法用法实例
Dec 27 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
Jul 29 Javascript
浅谈javascript中的数据类型转换
Dec 27 Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 Javascript
ES6中的Promise代码详解
Oct 09 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
浅谈Vue为什么不能检测数组变动
Oct 14 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
JS实现瀑布流效果
Mar 07 Javascript
Json实现传值到后台代码实例
Jun 30 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
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
用session做客户验证时的注意事项
2006/10/09 PHP
笑谈配置,使用Smarty技术
2007/01/04 PHP
php实现多维数组中每个单元值(数字)翻倍的方法
2015/02/16 PHP
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
Extjs单独定义各组件的实例代码
2013/06/25 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
全面解析Bootstrap中transition、affix的使用方法
2016/05/30 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
Bootstrap table的使用方法
2016/11/02 Javascript
js实现的简练高效拖拽功能示例
2016/12/21 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
基于Vue-cli快速搭建项目的完整步骤
2018/11/03 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
python实现寻找最长回文子序列的方法
2018/06/02 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
使用python制作一个解压缩软件
2019/11/13 Python
Sunglasses Shop德国站:欧洲排名第一的太阳镜网站
2017/08/01 全球购物
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
Zooplus罗马尼亚:宠物食品和配件
2019/11/02 全球购物
应届生财务会计求职信
2013/11/05 职场文书
最新奶茶店创业计划书
2014/01/25 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
交通安全责任书范本
2014/07/24 职场文书
趵突泉导游词
2015/02/03 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
nginx结合openssl实现https的方法
2021/07/25 Servers