使用纯javascript实现放大镜效果

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" }
                );
        }

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

赞 (0)

相关推荐

  • Javascript 实现放大镜效果实例详解

    Javascript 实现放大镜效果 今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的放大镜效果效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个很好的思路就是,展示区是一小块可视区域,给他一个图片,超出可视区域的部分设为隐藏,有了这个思路,这个效果就能够很好的实现了,先看一下HTML结构! <div id="pic_wrap"> <div id="floa

  • js 格式化时间日期函数小结

    复制代码 代码如下: Date.prototype.format = function(format){ var o = { "M+" : this.getMonth()+1, //month "d+" : this.getDate(), //day "h+" : this.getHours(), //hour "m+" : this.getMinutes(), //minute "s+" : this.g

  • JSP EL表达式详细介绍

    JSP EL表达式详细介绍

    一.JSP EL语言定义 E L(Expression Language)  目的:为了使JSP写起来更加简单. 表达式语言的灵感来自于 ECMAScript 和 XPath 表达式语言,它提供了在 JSP 中简化表达式的方法.它是一种简单的语言,基于可用的命名空间(PageContext 属性).嵌套属性和对集合.操作符(算术型.关系型和逻辑型)的访问符.映射到 Java 类中静态方法的可扩展函数以及一组隐式对象.       EL 提供了在 JSP 脚本编制元素范围外使用运行时表达式的功能.

  • js 将json字符串转换为json对象的方法解析

    例如: JSON字符串: var str1 = '{ "name": "cxh", "sex": "man" }'; JSON对象: var str2 = { "name": "cxh", "sex": "man" }; 一.JSON字符串转换为JSON对象 要使用上面的str1,必须使用下面的方法先转化为JSON对象: //由JSON字符串转换为

  • js 图片轮播(5张图片)

    演示地址:http://img.jb51.net/online/picPlayer/picplay.htm 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199

  • JS array 数组详解

    1.数组的声明方法 (1): arrayObj = new Array(); //创建一个数组. 复制代码 代码如下: var arr1 = new Array(); (2):arrayObj = new Array([size]) 创建一个数组并指定长度,注意不是上限,是长度. 复制代码 代码如下: var a = new Array(5); (3):arrayObj = new Array([element0[, element1[, ...[, elementN]]]]) 创建一个数组并赋

  • JS鼠标事件大全 推荐收藏

    一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标双击事件 onMouseDown HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标上的按钮被按下了 onMouseUp HTML: 2 | 3 | 3

  • js中cookie的使用详细分析

    cookie概述 在上一节,曾经利用一个不变的框架来存储购物栏数据,而商品显示页面是不断变化的,尽管这样能达到一个模拟 全局变量的功能,但并不严谨.例如在导航框架页面内右击,单击快捷菜单中的[刷新]命令,则所有的JavaScript变量都会丢失.因此,要实现严格的 跨页面全局变量,这种方式是不行的, JavaScript中的另一个机制:cookie,则可以达到真正全局变量的要求. cookie是浏览器提供的一种机制,它将document 对象的cookie属性提供给JavaScript.可以由J

  • js中将字符串转换成json的三种方式

    ECMA-262(E3) 中没有将JSON概念写到标准中,还好在 ECMA-262(E5)中JSON的概念被正式引入了,包括全局的JSON对象和Date的toJSON方法. 1,eval方式解析,恐怕这是最早的解析方式了.如下: 复制代码 代码如下: function strToJson(str){ var json = eval('(' + str + ')'); return json; } 记得别忘了str两旁的小括号. 2,new Function形式,比较怪异哦.如下 复制代码 代码如

  • 使用纯javascript实现放大镜效果

    jd或者淘宝的具体商品有个放大镜的效果.虽然网上类似插件琳琅满目,应用到项目上有诸多不便,自己抽点时间自己写了个类似插件,积累下代码,何乐而不为呢!!let'go: 打算把此特效封装成个插件,先把最基本的算法实现,然后再一步步封装吧: 最终实现效果: html 代码: 复制代码 代码如下: <div id="Magnifier"></div> css 代码: 复制代码 代码如下: <style>         * {             mar

  • JavaScript实现放大镜效果代码示例

    JavaScript实现放大镜效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title&

  • JavaScript实现放大镜效果

    JavaScript实现放大镜效果

    本文实例为大家分享了JavaScript实现放大镜效果的具体代码,供大家参考,具体内容如下 这次实现的效果如下: 这次的案例稍微有一点难度,在css和js上都需要多加思考,话不多说,让我们来开始吧~ 1.首先我们需要使用html和css规划好整体的布局,即两个相邻的盒子A和B,左边的盒子A中还有一个小盒子S.为了实现相邻,我采用的方法是为其均设置position:absolute ,然后设置left和top的值来使其相邻. 小盒子S我们同样可以为其设置position:absolute,调整一下

  • HTML+CSS+JavaScript实现放大镜效果

    HTML+CSS+JavaScript实现放大镜效果

    本文实例为大家分享了HTML+CSS+JavaScript实现放大镜效果的具体代码,供大家参考,具体内容如下 效果演示 JS 详解 HTML 和 CSS 部分放在了文章最后的源代码中,这里只对 JS 部分进行详解! 首先,需要获取操作的对象: 图片展示框(鼠标移入事件) 放大镜(显示和跟随鼠标) 放大镜中的图片(改变位置) let imgShow = document.querySelector('.img-show');  // 图片展示框 let imgLarge = document.qu

  • JavaScript图像放大镜效果实现方法详解

    JavaScript图像放大镜效果实现方法详解

    1. 基本四瓣花型图案 根据四瓣花卉线的参数方程: t= r*(1+sin(12*θ)/5)*(0.5+sin(4*θ)/2); x=t*cos(θ)); y=t*sin(θ)); 编写如下的HTML文件. <!DOCTYPE html> <head> <title>基本的四瓣花型图案</title> <script type="text/javascript"> function draw(id) { var canvas

  • 用javascript实现放大镜效果

    用javascript实现放大镜效果

    我们经常在一些详情页上可以见到放大镜效果,今天我们也来做一个放大镜样式. 先来看一下效果: 图中的图片选的不是很好,有些糊了,各位可以重新选择图片进行做放大镜案例 这个案例可以分为三个功能模块 1.鼠标经过小图片盒子,黄色的遮挡层和大图片盒子显示,离开隐藏2个盒子功能2.黄色的遮挡层跟随鼠标功能.3.移动黄色遮挡层,大图片跟随移动功能. 这是我们的html主体部分: <div class="product_intro clearfix">             <!

  • JavaScript图片放大镜效果代码[代码比较简单]

    JavaScript图片放大镜效果代码[代码比较简单]

    #div1 { width:304px; height:222px; position:relative; margin:30px auto 0px;} #div1 img{width:304px; height:222px;} #div1 span { width:100px; height:100px; background:red; left:0px;top:0px; position:absolute; display:none; filter:alpha(opacity:20); op

  • 尝试动手制作javascript放大镜效果

    尝试动手制作javascript放大镜效果

    本文实例为大家介绍了基于javascript实现放大镜效果的原理和代码,分享给大家供大家参考,具体内容如下: 原理: A:放大镜   B:小图片 C:大图片可视区域 D:大图片 鼠标的位置应该在放大镜的中央,所以鼠标位置为: clientX=A.offsetLeft()+B.offsetLeft+1/2*A.offsetWidth; clientY=A.offsetTop()+B.offsetTop+1/2*A.offsetHeight; 鼠标移动过程中:放大镜A和大图D是一起随鼠标成比例运动的

  • javascript放大镜效果的简单实现

    这个效果并不难,要点是位置和比例设置, 捕获鼠标位置.判断鼠标位置区域.还有onmouseover事件.onmousemove事件.onmouseout事件 设置显示大图的比例,小图上显示的切图比例都要弄准确点,最好是2倍啦,4倍啦. 主要注意宽度,我这里的图片m.jpg是1440X900的.... 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.

随机推荐