您好,欢迎访问一九零五行业门户网

使用纯javascript实现放大镜效果_javascript技巧

jd或者淘宝的具体商品有个放大镜的效果。虽然网上类似插件琳琅满目,应用到项目上有诸多不便,自己抽点时间自己写了个类似插件,积累下代码,何乐而不为呢!!let‘go:
打算把此特效封装成个插件,先把最基本的算法实现,然后再一步步封装吧:
最终实现效果:
html 代码:
复制代码 代码如下:
css 代码:
复制代码 代码如下:
貌似什么都没有,开始咱们强大的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                     mirrorleft = 0;
                }
                else if (mirrorleft > mask.offsetwidth - mirror.offsetwidth) {
                    mirrorleft = mask.offsetwidth - mirror.offsetwidth;
                }
                if (mirrortop                     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                     mirrorleft = 0;
                }
                else if (mirrorleft > this.offsetwidth - _this.mirror.offsetwidth) {
                    mirrorleft = this.offsetwidth - mirror.offsetwidth;
                }
                if (mirrortop                     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 }
                );
        }
以上就是本文所述的全部内容了,希望大家能够喜欢。
其它类似信息

推荐信息