javascript仿新浪微博图片放大缩小及旋转效果

/**
 * 缩略图
 */
 function ArtZoom(options,callback){
    var self = this;
    self.options = $.extend({},defaults,options || {});
    self._init();
    self.callback = callback;
    this.cache = {
        minStep   :  0,
        maxStep   :  3
    };
 };
 $.extend(ArtZoom.prototype,{

     // 初始化
     _init: function(){
        var self = this,
            cfg = self.options;
        
        if($(cfg.targetCls).length <= 0) {
            return;
        }
        $(cfg.targetCls).each(function(){
            $(this).unbind(‘click‘).bind(‘click‘,function(e){
                e.preventDefault();
                var maxImage = $(this).attr(‘href‘);
                self._imgTool($(this),maxImage);
            });
        });
     },
     /*
      * 点击小图变大图 先隐藏小图 再生成大图显示
      * @param {$this,maxImage} 当前点击的元素 当前大图
      */
     _imgTool: function($this,maxImage) {
        var self = this,
            cfg = self.options;
        var width = 0,
            height = 0,
            maxWidth = $this.closest(cfg.parentCls).outerWidth();

        // 图片预先加载
        var loadImg = function (url, fn) {
            var img = new Image();
            img.src = url;
            if (img.complete) {
                fn.call(img);
            } else {
                img.onload = function () {
                    fn.call(img);
                };
            };
        };
        loadImg(maxImage, function () {
            width = this.width;
            height = this.height;
            tool();
        });
        function tool(){

            var $thisParent = $($this).closest(cfg.parentCls);
            // 当前图片隐藏掉
            $this.hide();
            if($(‘.artZoomBox‘,$thisParent).length > 0 && $(‘.artZoomBox‘,$thisParent).css(‘display‘) == "none"){
                $(‘.artZoomBox‘,$thisParent).show();
            }
            // 图片等比例缩放
            if (width > maxWidth) {
                height = maxWidth / width * height;
                width = maxWidth;
            };
            // 页面只创建一次
            if($(‘.artZoomBox‘,$thisParent).length <= 0) {
                var html = ‘<div class="artZoomBox">‘+
                       ‘<div class="tool">‘+
                            ‘<a class="hideImg" href="#" title="收起">收起</a>‘+
                            ‘<a class="imgRight" href="#" title="向右转">向右转</a>‘+
                            ‘<a class="imgLeft" href="#" title="向左转">向左转</a>‘+
                            ‘<a class="viewImg" href="‘ + maxImage + ‘" title="查看原图">查看原图</a>‘+
                        ‘</div>‘+
                        ‘<a href="‘+maxImage+‘" class="maxImgLink">‘+
                            ‘<img class="maxImg" width="‘+width+‘" height="‘+height+‘" src="‘+maxImage+‘"/>‘+
                        ‘</a>‘+
                    ‘</div>‘;
                $($thisParent).append(html);
            }

            $(‘.artZoomBox‘,$thisParent).find(‘a‘).unbind(‘click‘).bind(‘click‘,function(e){
                e.preventDefault();
                var $this = $(this),
                    $parent = $(this).closest(cfg.parentCls);
                var box = $(‘.artZoomBox‘,$parent);
                // 收起
                if($($this).hasClass(‘hideImg‘) || $($this).hasClass(‘maxImgLink‘)) {
                    box.hide();
                    box.prev().show();
                    self.destory($this);
                };
                // 左旋转
                if($($this).hasClass(‘imgLeft‘)) {
                    var target = box.find(‘.maxImg‘);
                    self._rotate(target,‘left‘, width)
                };
                // 右旋转
                if($($this).hasClass(‘imgRight‘)) {
                    var target = box.find(‘.maxImg‘);
                    self._rotate(target,‘right‘, width);
                };
                // 新窗口打开
                if($this.hasClass(‘viewImg‘)){
                    window.open(maxImage);
                } 
            });
            
        }
     },
     /*
      * 图片旋转
      * @param {target,direction,width} 要旋转的元素，方向, 旋转元素的宽度
      */
     _rotate: function(target,direction,width){
        var self = this,
            cache = self.cache;

        var img = $(target)[0],
            step = img.getAttribute(‘step‘);
        if(img.length <= 0) {
            return;
        }
        if (step == null) {
            step = cache.minStep;
        }
        var width = img.width,
            height = img.height;
        if(direction == ‘left‘) {
            step--;
            if(step < cache.minStep) {
                step = cache.maxStep;
            }
        }else if(direction == ‘right‘) {
            step++;
            if(step > cache.maxStep) {
                step = cache.minStep;
            }
        }
        img.setAttribute(‘step‘, step);
        // IE
        if(navigator.userAgent.indexOf(‘MSIE‘) >= 0) {
            var s = $(img).attr(‘step‘);
            img.style.filter = ‘progid:DXImageTransform.Microsoft.BasicImage(rotation=‘ + s + ‘)‘;
            img.width = width;
            img.height = height;
        }else {  // 对于现代浏览器 使用canvas
             var canvas = $(img).next(‘canvas‘)[0];
            if ($(img).next(‘canvas‘).length == 0) {
                img.style.display = ‘none‘;
                canvas = document.createElement(‘canvas‘);
                canvas.setAttribute(‘class‘, ‘canvas‘);
                img.parentNode.appendChild(canvas);
            }
            //旋转角度以弧度值为参数
            var degree = step * 90 * Math.PI / 180;
            var ctx = canvas.getContext(‘2d‘);
            switch (step) {
                case 0:
                    canvas.width = width;
                    canvas.height = height;
                    ctx.drawImage(img, 0, 0);
                    break;
                case 1:
                    canvas.width = height;
                    canvas.height = width;
                    ctx.rotate(degree);
                    ctx.drawImage(img, 0, -height);
                    break;
                case 2:
                    canvas.width = width;
                    canvas.height = height;
                    ctx.rotate(degree);
                    ctx.drawImage(img, -width, -height);
                    break;
                case 3:
                    canvas.width = height;
                    canvas.height = width;
                    ctx.rotate(degree);
                    ctx.drawImage(img, -width, 0);
                    break;
            }
        }
        $(target).attr("step",cache.step);
        self.callback && $.isFunction(self.callback) && self.callback(cache.step);
     },
     /*
      * 销毁
      */
     destory: function($this){
        var self = this,
            cfg = self.options;
        var curParent = $this.closest(cfg.parentCls),
            canvas = $(‘.canvas‘,curParent),
            maxImg = $(‘.maxImg‘,curParent);
        
        if(navigator.userAgent.indexOf(‘MSIE‘) >= 0) {
            // IE
            $(maxImg)[0].style.filter = ‘progid:DXImageTransform.Microsoft.BasicImage(rotation=0)‘;
            $(maxImg).attr(‘step‘,0);
        }else{
            if(canvas.length > 0) {
                canvas.remove();
                maxImg.show();
                $(maxImg).attr("step",0);
            }
        }
     }
 });
 var defaults = {
     targetCls            :  ‘.artZoom‘,
     parentCls            :  ‘.parentCls‘   // 当前元素最近的父元素的class
 };