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

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

经常看到新浪微博里有图片放大缩小旋转效果，感觉效果还不错，所以就想试着做一个类似的demo出来，至于旋转对于IE可以用滤镜来解决，标准的浏览器可以用html5中的canvas画布来解决。

思路：1.点击小图后，小图隐藏掉，在小图父级元素后增加一张大图且显示出来。

2.点击往左转，往右转触发旋转方法。

3. 点击收起按钮，把1的步骤反过来 隐藏大图 显示小图。

4. 点击查看原图功能 目前没有做成js灯箱效果，直接打开一个新连接。但是如果想做成灯箱效果的话，可以看我这篇博客，灯箱效果演示

我们可以先来看看JSFiddler效果吧！

嘿嘿，看效果请点击我！

实现思路：

1. 对于第一点 小图隐藏 大图显示这个可以不用说的。

2. 对于旋转：IE用滤镜解决,如：img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + s + ')'; 标准浏览器可以用canvas+旋转

代码中用了一个图片预加载，想要了解图片预加载的话 可以看这篇文章  "图片预加载"  还用了一个图片等比例缩放 想了解等比例缩放的话 可以查看 "等比例缩放图片"

下面是所有的JS源码，大家有空可以看看，如果有更好的思路的话，可以提意见，一起交流下。

/**
 * 缩略图
 */
 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
 };

demo下载

HTML代码如下：

<li class="parentCls">
    <a class="artZoom" href="http://m1.img.srcdd.com/farm5/d/2014/0718/21/EDEF32A674C1217FB6F80851514C124E_B250_400_250_278.jpeg">
    <img src="http://m1.img.srcdd.com/farm4/d/2014/0718/21/31789C10D628913054C9B7F3A11D3519_B250_400_150_108.jpeg" /></a> </li>

其中父类 增加配置元素 parentCls ，当前大图链接写在href属性里面。