使用纯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开发技术大全-第3章 js数据类型
Jul 03 Javascript
Js中获取frames中的元素示例代码
Jul 30 Javascript
浅谈JavaScript事件的属性列表
Mar 01 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
实例教学如何写vue插件
Nov 30 Javascript
微信小程序使用wxParse解析html的方法教程
Jul 06 Javascript
快速解决vue在ios端下点击响应延时的问题
Aug 27 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
Sep 16 Javascript
Vue实现附件上传功能
May 28 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
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
php中error与exception的区别及应用
2014/07/28 PHP
php批量删除操作(数据访问)
2017/05/23 PHP
php实现的中秋博饼游戏之掷骰子并输出结果功能详解
2017/11/06 PHP
js三种排序算法分享
2012/08/16 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
2016/07/18 Javascript
BootStrap中
2016/12/10 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
在vue项目中使用sass的配置方法
2018/03/20 Javascript
vue如何判断dom的class
2018/04/26 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
详解webpack引用jquery(第三方模块)的三种办法
2019/08/21 jQuery
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
Python中的hypot()方法使用简介
2015/05/18 Python
Python3单行定义多个变量或赋值方法
2018/07/12 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
python 的 openpyxl模块 读取 Excel文件的方法
2019/09/09 Python
python爬虫要用到的库总结
2020/07/28 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
财务工作个人求职的自我评价
2013/12/19 职场文书
工厂会计员职责
2014/02/06 职场文书
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
致共产党员倡议书
2014/04/16 职场文书
节能环保口号
2014/06/12 职场文书
党员十八大心得体会
2014/09/12 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书