ziqim/zhiqim_ui/src_extend/zhiqim_magic_zoom.js

/*
 * 版权所有 (C) 2015 知启蒙(ZHIQIM) 保留所有权利。
 * 
 * 指定登记&发行网站： https://www.zhiqim.com/ 欢迎加盟知启蒙，[编程有你，知启蒙一路随行]。
 *
 * 本文采用《知启蒙登记发行许可证》，除非符合许可证，否则不可使用该文件！
 * 1、您可以免费使用、修改、合并、出版发行和分发，再授权软件、软件副本及衍生软件；
 * 2、您用于商业用途时，必须在原作者指定的登记网站，按原作者要求进行登记；
 * 3、您在使用、修改、合并、出版发行和分发时，必须包含版权声明、许可声明，及保留原作者的著作权、商标和专利等知识产权；
 * 4、您在互联网、移动互联网等大众网络下发行和分发再授权软件、软件副本及衍生软件时，必须在原作者指定的发行网站进行发行和分发；
 * 5、您可以在以下链接获取一个完整的许可证副本。
 * 
 * 许可证链接：http://zhiqim.org/licenses/zhiqim_register_publish_license.htm
 *
 * 除非法律需要或书面同意，软件由原始码方式提供，无任何明示或暗示的保证和条件。详见完整许可证的权限和限制。
 */
 
+(function(Z)
{
/****************************************/
//“图片放大镜”
/****************************************/

// 1、配置举例：
// <ul id="zoomList">
//     <li><img src="https://www.zhiqim.com/document/inc/www/tutorial/guest.jpg"></li>
//     <li><img src="https://www.zhiqim.com/document/inc/www/tutorial/guest.jpg"></li>
//     <li><img src="https://www.zhiqim.com/document/inc/www/tutorial/guest.jpg"></li>
//     <li><img src="https://www.zhiqim.com/document/inc/www/tutorial/guest.jpg"></li>
// </ul>
//
// <script>
//     var newMagicZoom = new Z.MagicZoom(); 
//     newMagicZoom.elem = Z("#zoomList");            // 列表对象
//     newMagicZoom.width = 400;                      // 自定义宽度
//     newMagicZoom.listShow = 5;                     // 自定义小图显示个数
//     newMagicZoom.zoomRatio = 2;                    // 自定义缩放倍数
//     newMagicZoom.execute();
// </script>

/************************************************************************/
/********************************************/

Z.MagicZoom = Z.Class.newInstance();
Z.MagicZoom.prototype = 
{
    //start of Z.MagicZoom.prototype
    defaults: 
    {//定义
        elem: null,          // 列表对象
        width: -1,            // 容器宽度，默认为 -1，动态计算
        listShow: 5,          // 导航最多展示图片数量
        zoomRatio: 2,         // 缩放倍数，默认两倍
    },
    init: function()
    {//初始化
    },
    execute: function()
    {//执行
        this.$elem = Z.$elem(this.elem, "Z.MagicZoom");
        if (this.width < 0){
            this.width = this.$elem.offsetWidth();
        }
        
        //重新组装排版
        var wrapHtml = '<div class="z-magicZoom z-relative" style="width:'+this.width+'px;">';
        wrapHtml +=         '<div class="z-zoomImg z-w100p z-bd z-relative" style="height:'+this.width+'px;">';
        wrapHtml +=             '<img class="z-absolute-center-middle" src="">';
        wrapHtml +=             '<i class="z-font z-query z-absolute z-r0 z-b0 z-w30 z-h30 z-px20 z-lh30 z-text-center"></i>';
        wrapHtml +=             '<div class="z-zoomCover z-absolute z-bd z-hide"></div>';
        wrapHtml +=         '</div>';
        wrapHtml +=         '<div class="z-zoomList z-w100p z-mg-t3 z-relative"><div class="z-relative z-overflow-hidden"></div></div>';
        wrapHtml +=         '<div class="z-zoomShow z-absolute z-overflow-hidden z-hide"><img class="z-absolute z-l0 z-t0" src=""></div>';
        wrapHtml +=     '</div>';
        
        this.$wrap = Z(wrapHtml).insertAfter(this.$elem);
        this.$zoom = this.$wrap.find(".z-zoomImg");
        this.$zoomImg = this.$zoom.find("img");
        this.$zoomIcon = this.$zoom.find(".z-font");
        this.$list = this.$wrap.children(".z-zoomList");
        this.$listUl = this.$list.find("div").append(this.$elem);
        this.$lis = this.$elem.find("li").css("opacity",.5);
        
        //常量
        this.length = this.$lis.length;
        this.zoomWidth = this.$zoom.offsetWidth()-2;
        this.zoomHeight = this.$zoom.offsetHeight()-2;
        this.coverWidth = this.zoomWidth / this.zoomRatio;
        this.coverHeight = this.zoomHeight / this.zoomRatio;
        this.maxX = this.zoomWidth - this.coverWidth;
        this.maxY = this.zoomHeight - this.coverHeight;
        this.minCx = this.coverWidth/2;
        this.minCy = this.coverHeight/2;
        this.maxCx = this.maxX + this.coverWidth/2;
        this.maxCy = this.maxY + this.coverHeight/2;
        
        //遮罩层、展示层
        this.$zoomCover = this.$wrap.find(".z-zoomCover").css("width",this.coverWidth).css("height",this.coverHeight);
        this.$zoomShow = this.$wrap.find(".z-zoomShow").css("width",this.zoomWidth).css("height",this.zoomHeight)
            .css("left",this.zoomWidth + 10).css("top",0);
        this.$showImg = this.$zoomShow.find("img");
        
        if (this.length > this.listShow){
            this.hasBtn = true;
            this.$btnPrev = Z('<div class="z-absolute z-l0 z-t0 z-b0 z-w20 z-h100p z-bd z-text-center z-pointer z-event-none z-text-gray"><i class="z-font z-arrowhead-left z-absolute-center-middle z-w20 z-h20"></i></div>').appendTo(this.$list);
            this.$btnNext = Z('<div class="z-absolute z-r0 z-t0 z-b0 z-w20 z-h100p z-bd z-text-center z-pointer"><i class="z-font z-arrowhead-right z-absolute-center-middle z-w20 z-h20"></i></div>').appendTo(this.$list);
            this.$listUl.addClass("z-mg-l20 z-mg-r20");
            this.$btnPrev.on("click", this.prevList, this);
            this.$btnNext.on("click", this.nextList, this);
        }
        
        //计算每个小图大小
        var ulWidth = this.$listUl.offsetWidth() - 6;
        this.liWidth = Math.round(ulWidth/this.listShow);
        
        this.$listUl.css("height",this.liWidth);
        this.$list.css("height",this.liWidth);
        this.$elem.css("width",this.liWidth * this.length).css("height",this.liWidth);
        this.$lis.css("width",this.liWidth - 6).css("height",this.liWidth - 6);
        
        this.ulShow = ulWidth;
        this.ulWidth = this.$elem.offsetWidth();
        
        //第一张图
        this.setImgSrc(0);
        
        //绑定事件
        this.$zoom.on("mouseenter", this.zoomEnter, this).on("mousemove", this.zoomMove, this).on("mouseleave", this.zoomLeave, this);
        this.$lis.on("mouseenter", this.lisEnter, this);
    },
    setImgSrc: function(index)
    {
        var $li = Z(this.$lis[index]);
        $li.css("opacity",1).siblings("li").css("opacity",.5);
        var imgSrc = $li.find("img").attr("src");
        this.$zoomImg.attr("src", imgSrc);
        this.$showImg.attr("src", imgSrc);
    },
    zoomEnter: function(ev)
    {//进入 zoom ，显示放大镜
        Z.E.forbidden(ev);
        this.$zoomCover.show();
        this.$zoomShow.show();
        
        //设置位置
        var mX = ev.clientX;
        var mY = ev.clientY;
        var rect = this.$zoom[0].getBoundingClientRect();
        var cX = rect.left + rect.width/2;
        var cy = rect.top + rect.height/2;
        
        this.$zoomCover.css("left", (mX > cX)?this.maxX:0)
            .css("top", (mY > cy)?this.maxY:0);
        
        this.$showImg.css("width",this.$zoomImg.offsetWidth() * this.zoomRatio)
            .css("height",this.$zoomImg.offsetHeight() * this.zoomRatio)
            .css("margin-left",parseInt(this.$zoomImg.css("margin-left")) * this.zoomRatio)
            .css("margin-top",parseInt(this.$zoomImg.css("margin-top")) * this.zoomRatio);
    },
    zoomMove: function(ev)
    {//移动放大镜
        Z.E.forbidden(ev);
        
        // cover 位置计算
        var mX = ev.clientX;
        var mY = ev.clientY;
        var rect = this.$zoom[0].getBoundingClientRect();
        mX -= rect.left;
        mY -= rect.top;
        var setX, setY;
        if (mX < this.minCx){
            setX = 0;
        } else if (mX > this.maxCx){
            setX = this.maxX;
        } else {
            setX = mX - this.minCx;
        }
        if (mY < this.minCy){
            setY = 0;
        } else if (mY > this.maxCy){
            setY = this.maxY;
        } else {
            setY = mY - this.minCy;
        }
        
        //cover 位置定义
        this.$zoomCover.css("left", setX).css("top", setY);
        
        //show 位置计算
        setX = -(setX * this.zoomRatio);
        setY = -(setY * this.zoomRatio);
        this.$showImg.css("left", setX).css("top", setY);
    },
    zoomLeave: function(ev)
    {//离开 zoom ，隐藏放大镜
        Z.E.forbidden(ev);
        this.$zoomCover.hide();
        this.$zoomShow.hide();
    },
    lisEnter: function(ev)
    {//hover 小图片，切换图片显示
        Z.E.forbidden(ev);
        var $li = Z(Z.E.current(ev));
        if ($li.css("opacity") == "1")
            return;
        var liIndex = this.getParentIndex($li[0]);
        this.setImgSrc(liIndex)
    },
    prevList: function(ev)
    {//向前切换图片列表
        Z.E.forbidden(ev);
        var nLeft = parseInt(this.$elem.css("left"));
        nLeft += this.ulWidth;
        nLeft = nLeft > 0 ? 0 : nLeft;
        this.$elem.css("left", nLeft);
        
        //按钮状态
        this.$btnNext.removeClass("z-event-none").removeClass("z-text-gray");
        if (nLeft == 0){
            this.$btnPrev.addClass("z-event-none z-text-gray");
        }
        
    },
    nextList: function(ev)
    {//向后切换图片列表
        Z.E.forbidden(ev);
        var nLeft = parseInt(this.$elem.css("left"));
        nLeft -= this.ulShow;
        if ((this.ulShow - nLeft)> this.ulWidth){
            nLeft = this.ulShow - this.ulWidth;
        }
        this.$elem.css("left", nLeft);
        
        //按钮状态
        this.$btnPrev.removeClass("z-event-none").removeClass("z-text-gray");
        if (nLeft == (this.ulShow - this.ulWidth)){
            this.$btnNext.addClass("z-event-none z-text-gray");
        }
    },
    getParentIndex: function(elem)
    {//获取 elem 在父级的 索引值
        var ind = 0;
        while (elem = elem.previousSibling) {
            if (elem.nodeType == 1)
                ind++
        }
        return ind;
    },
    //end of Z.MagicZoom.prototype
}


//END
})(zhiqim);