首页 > 代码库 > javascript仿新浪微博图片放大缩小及旋转效果
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="http://www.mamicode.com/#" title="收起">收起</a>‘+ ‘<a class="imgRight" href="http://www.mamicode.com/#" title="向右转">向右转</a>‘+ ‘<a class="imgLeft" href="http://www.mamicode.com/#" title="向左转">向左转</a>‘+ ‘<a class="viewImg" href="http://www.mamicode.com/‘ + maxImage + ‘" title="查看原图">查看原图</a>‘+ ‘</div>‘+ ‘<a href="http://www.mamicode.com/‘+maxImage+‘" class="maxImgLink">‘+ ‘<img class="maxImg" width="‘+width+‘" height="‘+height+‘" src="http://www.mamicode.com/‘+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属性里面。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。