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