使用纯javascript实现放大镜效果

jd或者淘宝的具体商品有个放大镜的效果。虽然网上类似插件琳琅满目,应用到项目上有诸多不便,自己抽点时间自己写了个类似插件,积累下代码,何乐而不为呢!!let‘go:

打算把此特效封装成个插件,先把最基本的算法实现,然后再一步步封装吧:

最终实现效果:

html 代码:

复制代码 代码如下:


<div></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小小的调用一下:

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgfwgd.html