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 = '
'+ ''+ ''+ ''+ ''+ '
'; $($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 };
View Code

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属性里面。

你可能感兴趣的:(javascript仿新浪微博图片放大缩小及旋转效果)