仿QQ查看图片的jQuery插件，可旋转，缩放和拖动。

工作一段时间了，第一次写技术博客，最近由于项目需求，需要做一个页面查看图片查看的功能，图片可以缩放，选择，和拖动位置。接到任务，第一时间肯定是Google和度娘，结果找了一圈，也没有找到合适的插件，不是要收费就是功能不能完全满足，最终写决心自己写一个。废话不多说，直接上代码。热烈欢迎大神给我优化改进的建议。

;(function($, window, document,undefined){

var LG = function(ele,opt){

this.isFirefox = navigator.userAgent.toUpperCase().indexOf("FIREFOX") >= 0 ? true : false;

this.$element = ele;

this.defaults = {

"stepScale":0.2,

"totalScale":1,

"stepRotate":90,

"totalRotate":0,

};

this.startPoint = {x:0,y:0},

this.translateXY = {x:0,y:0},

this.dragging = false;

this.options = $.extend({},this.defaults,opt);

this.$element.css("webkitTransform","translate(0px,0px)");

}

LG.prototype = {

pauseEvent : function(e){

if(e.stopPropagation) e.stopPropagation();

if(e.preventDefault) e.preventDefault();

e.cancelBubble=true;

e.returnValue=false;

return false;

},

scale : function(totalscale,that){

var temp = that.$element[0].style.webkitTransform;

var newTransform = '';

if(temp){

if(temp.indexOf('scale')>=0){

newTransform = temp.replace(/scale\(.*\d\)/,"scale(" + totalscale + ")");

}else{

newTransform = temp + " " + "scale(" + totalscale + ")";

}

}else{

newTransform = "scale(" + totalscale + ")";

}

that.$element[0].style.webkitTransform=newTransform;

},

scrollFunc:function(event,that) {

var e = event || window.event;

var value = 0;

if (e.wheelDelta) {//IE/Opera/Chrome

value = e.wheelDelta;

} else if (e.detail) {//Firefox

value = e.detail;

} else if(e.originalEvent){

if(e.originalEvent.wheelDelta){

value = e.originalEvent.wheelDelta;

}else if(e.originalEvent.detail){

value = e.originalEvent.detail;

}

}

if (that.isFirefox) {

value = -1 * value;

}

value = value > 0 ? 1 : -1;

var scaleTemp = this.options.totalScale + value * this.options.stepScale;

if(scaleTemp<1){

scaleTemp = 1;

return;

}else if(scaleTemp>5){

scaleTemp = 5;

return;

}

that.options.totalScale = scaleTemp;

this.scale(scaleTemp,that);

},

render:function(){

var that = this;

this.$element.on('dblclick',function(event){

var total = that.options.totalRotate + that.options.stepRotate;

total = total>360?total%360:total;

var temp = that.$element[0].style.webkitTransform;

var newTransform = '';

if(temp){

if(temp.indexOf('rotate')>=0){

newTransform = temp.replace(/rotate\(\d+deg\)/,"rotate(" + total + "deg)");

}else{

newTransform = temp + " " + "rotate(" + total + "deg)";

}

}else{

newTransform = "rotate(" + total + "deg)";

}

that.$element[0].style.webkitTransform=newTransform;

that.options.totalRotate = total;

}).on('mouseout',function(event){

event = event||window.event;

//获得相对于body定位的横标值；

x=event.clientX

//获得相对于body定位的纵标值；

y=event.clientY

that.dragging = false;

}).on('mousedown',function(event){

event = event||window.event;

//获得相对于body定位的横标值；

that.startPoint.x=event.clientX

//获得相对于body定位的纵标值；

that.startPoint.y=event.clientY

that.dragging = true;

that.pauseEvent(event);

}).on('mouseup',function(event){

event = event||window.event;

//获得相对于body定位的横标值；

x=event.clientX

//获得相对于body定位的纵标值；

y=event.clientY

that.dragging = false;

}).on('mousemove',function(event){

if(!that.dragging)

return;

event = event||window.event;

//获得相对于body定位的横标值；

x=event.clientX

//获得相对于body定位的纵标值；

y=event.clientY

var temp = that.$element[0].style.webkitTransform;

var dx = x - that.startPoint.x;

var dy = y - that.startPoint.y;

that.translateXY.x = that.translateXY.x+(dx/20);

that.translateXY.y = that.translateXY.y+(dy/20);

var ntemp = temp.replace(/translate\(.+px\)/,"translate("+that.translateXY.x+"px,"+that.translateXY.y+"px)");

that.$element[0].style.webkitTransform=ntemp;

}).on('mousewheel',function(event){

that.scrollFunc(event,that);

});

if (document.addEventListener) {

document.addEventListener('DOMMouseScroll', function(event){

that.scrollFunc(event,that);

}, false);

}

}

}

$.fn.imageViewer = function(options){

var lg = new LG(this,options);

return lg.render();

}

})($, window, document,undefined);

复制上面的代码，保存为js文件，引入到需要使用的页面中。下面是使用的例子。

<img class="clipped"  id="image1" src="http://www.artup.com/img/icon35.png" width="282" height="220" >

<script type="text/javascript">

//stepRotate:每次旋转的角度

//stepScale:每次滚动鼠标缩放的倍数
    $(function(){
    $("#image1").imageViewer({stepRotate:90,stepScale:0.2});
    });
 
    </script>

ok,双击图片，图片就会旋转，滚动鼠标滚轮，图片会放大缩小，按住鼠标左键，可以拖动查看图片不同的部位。