使用純javascript實現放大鏡效果_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

使用純javascript實現放大鏡效果_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:08 PM

javascript放大鏡

jd或淘寶的具體商品有個放大鏡的效果。雖然網路上類似插件琳瑯滿目，應用在專案上有諸多不便，自己抽點時間自己寫了個類似插件，累積下程式碼，何樂而不為呢!!let‘go:

打算把此特效封裝成個插件，先把最基本的演算法實現，然後再一步步封裝吧：

最終實現效果：

html 代碼：

複製程式碼程式碼如下:

css 代碼：

複製程式碼程式碼如下:

似乎什麼都沒有，開始咱們強大的js之旅吧：

javascript 程式碼：

複製程式碼程式碼如下:

  函數 createElement(MagnifierId, sImg, bImg) {

            var 放大鏡 = $(MagnifierId);

            Magnifier.style.position = '相對';

            //小圖div

            var SmallDiv = $Create("div");

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

            SmallDiv.style.position = "絕對";

            //遮罩層

            var mask = $Create("div");

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

            mask.style.position = "絕對";

            // 鏡頭

            varmirror = $Create("div");

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

            mirror.style.opacity = 0.3;

            mirror.style.position = "絕對";

            mirror.style.display = "無";

            //小圖

            var SmallImg = $Create("img");

            SmallImg.setAttribute("src", sImg);

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

            SmallImg.onload = function () {

                //如果沒有設定放大鏡的高度或寬度依小圖大小設定放大鏡大小

                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 = "絕對";

            bigDiv.style.overflow = "隱藏";

            bigDiv.style.display = "none";
            var bigImg = $Create("img");

            bigImg.setAttribute("src", bImg);

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

            bigImg.style.position = "絕對";

            bigDiv.appendChild(bigImg);

            Magnifier.appendChild(smallDiv);

            Magnifier.appendChild(bigDiv);

        }

        function setMagnifierStyle(mirrorStyle,shichuangStyle) {

            // 鏡子

            for (mirrorStyle 中的 var item) {

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

            }

            for (shichuangStyle 中的 var item) {

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

            }

        }

        函數registerEvent() {

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

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

                mirror.style.display = "block";

            }

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

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

                mirror.style.display = "無";

            }

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

                var oEvent = evt ||事件；

                var disX = oEvent.offsetX;

                var disY = oEvent.offsetY;

                varmirrorLeft=disX-mirror.offsetWidth/2;

                varmirrorTop=disY-mirror.offsetHeight/2;

                if (mirrorLeft 
                    鏡像左 = 0;

                }

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

                    mirrorLeft = mask.offsetWidth -mirror.offsetWidth;

                }

                if (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";

            }

        }

        函數 $(id) {

            return document.getElementById(id);

        }

        函數 $Create(類型) {

            return document.createElement(type);

        }

最後重新加載搶奪：

複製程式碼程式碼如下：

 window.onload = function () {

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

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

            註冊事件();

        }

算效果總出來了耶，

2. 我們接下來的封裝：

放大鏡類別代碼：

複製程式碼程式碼如下：

        function Magnifier(

            MagnifierId,                       
            sImg,                       
            Img,                        
            mirrorStyle,                      
            ViewStyle                       
            ) {

            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 (mirrorStyle 中的 var item) {

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

            }

            刪除項目；

            for (ViewStyle 中的 var item) {

                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 = "無";

            }

            this.mask.onmousemove = function (evt) {

                var oEvent = evt ||事件；

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

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

                varmirrorLeft = disX - _this.mirror.offsetWidth / 2;

                varmirrorTop = disY - _this.mirror.offsetHeight / 2;

                if (mirrorLeft 
                    鏡像左 = 0;

                }

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

                    mirrorLeft = this.offsetWidth -mirror.offsetWidth;

                }

                if (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.$ = 関数 (id) {

            return document.getElementById(id);

        }

        Magnifier.prototype.$Create = 関数 (型) {

            return document.createElement(type);

        }

最後にonload调用下：

复制代代码如下:

window.onload = function () {

            新しい拡大鏡(

                        「拡大鏡」、

                        "images/Magnifier/small.jpg",

                        "images/Magnifier/big.jpg",

                        { "幅": "30px"、"高さ": "30px"、"backgroundColor": "#fff" },

                        { "幅": "250px"、"高さ": "250px" }

                );

        }

以上が本明細書に記載されている内容のすべてです。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn