jquery xzy_zoompic 图片放大缩小查看插件

【Javascript】

下载

新闻

文章

功能：点击对象弹出可移动的窗口显示图片，图片可滚轮放大与缩小并移动，方便对照图片输入需要的信息（原始需求）双击还原原始大小。

因工作需要紧急制作的一个图片查看插件。

<script type="text/javascript">
$(document).ready(function() {
    $(".z_pic").xzy_zoompic(500,400,4,200);
});
/*
jquery xzy_zoompic 图片放大缩小查看插件
$(class).xzy_zoompic(w,h,unit,min)
w:窗口宽度，可选参数，默认350像数
h:窗口高度，可选参数，默认300像数
unit:滚轮时放大或缩小系数，可选参数，默认5个像数
min:图片缩小时最小宽度，可选参数，默认200像数
功能：点击对象弹出可移动的窗口显示图片，图片可滚轮放大与缩小并移动，方便对照图片输入需要的信息（原始需求）双击还原原始大小。
作者：太阳光
此插件是因工作需要，费时1小时完成，部分功能仍不理想。
*/
jQuery.fn.extend({
    xzy_zoompic:function (w,h,unit,min){
        w=w||350;h=h||300;unit=unit||5;min=min||200;
        $('body').append('<div id="xzy_zoompic" style="width:'+w+'px;height:'+h+'px"><div id="xzy_zoompic_title" style="width:'+w+'px"><div id="xzy_zoompic_close" title="点击关闭"></div><span></span></div><img src="" id="xzy_zoompic_pic" /></div>');
        $(this).click(function(){
            $("#xzy_zoompic_pic").attr("src",$(this).attr("src")).css({width:"auto",top:0,left:0});
            $("#xzy_zoompic_title span").html($(this).attr("alt"));
            var i_top=$(this).offset().top;
            var i_left=parseInt($(window).width()/2-w/2);
            $("#xzy_zoompic").css({display:"block",left:i_left,top:i_top});
        });
        function move_div(id){
            $(id).mousedown(function (e) {
                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);
            return false;
        }
        $("#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");
        $("#xzy_zoompic_close").click(function(){
            $("#xzy_zoompic").hide();
        });
    }
});
</script>

效果浏览点击这里。