jquery xzy_zoompic 图片放大缩小查看插件[多窗口]

【Javascript】

下载

新闻

文章

功能：点击对象弹出可移动的窗口显示图片，图片可滚轮放大与缩小并移动，双击还原原始大小。经过修改可弹出多个窗口。

jQuery.fn.extend({
    xzy_zoompic:function (w,h,unit,min){
        w=w||350;h=h||300;unit=unit||5;min=min||200;
        $(this).click(function(){
            var i=$(".z_pic").index($(this));
            $(".xzy_zoompic").css("z-index",1000);
            if($("#zoompic_"+i)[0]){
                $("#zoompic_"+i).css("z-index",1001);
            }else{
                var i_left=parseInt($(window).width()/2-w/2);
                $('body').append('<div class="xzy_zoompic" id="zoompic_'+i+'" style="z-index:1001;width:'+w+'px;height:'+h+'px;left:'+i_left+'px;top:'+$(this).offset().top+'px"><div class="xzy_zoompic_title" style="width:'+w+'px"><div class="xzy_zoompic_close" onclick="$(\'#zoompic_'+i+'\').remove()" title="点击关闭"></div>'+$(this).attr("alt")+'</div><img src="'+$(this).attr("src")+'" class="xzy_zoompic_pic" /></div>');
                $(".xzy_zoompic_pic").mouseover(function(){
                    if (document.addEventListener) {
                        this.addEventListener('DOMMouseScroll', scrollMouse, false);
                    }
                    this.onmousewheel = this.onmousewheel = scrollMouse;
                }).dblclick(function(){
                    $(this).css({width:"auto",top:0,left:0});
                });
                move_div(".xzy_zoompic_pic");
                move_div(".xzy_zoompic");
            }
        });
        function move_div(id){
            $(id).mousedown(function (e) {
                $(".xzy_zoompic").css("z-index",1000);
                $(this).parent(".xzy_zoompic").css("z-index",1001);
                $(this).css("z-index",1001);
                var oe=e||window.event;
                var $this = this;
                var startX = oe.clientX - $this.offsetLeft;
                var startY = oe.clientY - $this.offsetTop;
                document.onmousemove = function (e) {
                    var oe = e || window.event;
                    $this.style.left = oe.clientX - startX + "px";
                    $this.style.top = oe.clientY - startY + "px";
                };
                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                    if ($this.releaseCapture) {
                        $this.releaseCapture();
                    }
                };
                if ($this.setCapture) {
                    $this.setCapture();
                }
                return false;
            });
        }
        function scrollMouse(e) {
            var direct = 0;
            e = e || window.event;
            if (e.wheelDelta) {
                direct = e.wheelDelta;
                e.returnValue=false
            } else if (e.detail) {
                direct = e.detail;
                e.preventDefault();
            }
            var t = parseInt($(this).width());
            if (direct < 0) {
                t += unit;
            } else {
                t -= unit;
            }
            $(this).width(t < min ? min : t);
        }
    }
});

效果浏览点击这里。