<link href="http://120.26.59.104/base.css" rel="stylesheet" type="text/css" />

<style>.imgWap{ width:500px; height:600px; border:1px solid #ddd; position:relative;}.imgWap .img{ position:absolute; top:10px; left:10px;}.imgWap .img img{ width:100%; height:100%;}.imgWap .img .zhuan,.imgWap .img .suo,.imgWap .img .shan{ position:absolute; width:58px; height:58px;}.imgWap .img .zhuan{ top:-29px; left:-29px; background:url(http://120.26.59.104/bankcard/images/zhuan.png);cursor:se-resize}.imgWap .img .suo{ bottom:-29px; right:-29px;background:url(http://120.26.59.104/bankcard/images/suo.png); cursor:se-resize}.imgWap .img .shan{ top:-29px; right:-29px;background:url(http://120.26.59.104/bankcard/images/shan.png); cursor:pointer}</style>

<div class="imgWap"><div class="img" style="width:200px; height:200px;"><div class="zhuan"></div><div class="suo"></div><div class="shan"></div><img src="http://g.hiphotos.baidu.com/image/h%3D300/sign=543efd1b2b738bd4db21b431918a876c/f7246b600c3387446572adba540fd9f9d62aa045.jpg" draggable="false" /></div>
</div>

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.ablanxue.com/uploadfile/201405/14002000656579086/ablanxue/js/jQueryRotate.2.2.js"></script>

//调用方法
drag($(".imgWap"),$(".imgWap .img"));function drag($outTar,$imgWap){var _tarWidth,_tarHeight;var _outWidth = $outTar.width();var _outHeight = $outTar.height();//拖拽$(document).mousemove(function(e) {if (!!this.move) {var posix = !document.move_target ? {'x': 0, 'y': 0} : document.move_target.posix,callback = document.call_down || function() {var _top;var _left;_tarWidth = $(this.move_target).width(),_tarHeight = $(this.move_target).height();var _maxWidth = _outWidth - _tarWidth;var _maxHeight = _outHeight - _tarHeight;_top = e.pageY - posix.y;_left = e.pageX - posix.x;if((e.pageY - posix.y)<0){_top = 0}else if((e.pageY - posix.y)>_maxHeight){_top = _maxHeight};if((e.pageX - posix.x)<0){_left = 0}else if((e.pageX - posix.x)>_maxWidth){_left = _maxWidth};$(this.move_target).css({'top': _top,'left': _left});};callback.call(this, e, posix);}}).mouseup(function(e) {if (!!this.move) {var callback = document.call_up || function(){};callback.call(this, e);$.extend(this, {'move': false,'move_target': null,'call_down': false,'call_up': false});}});var $box = $imgWap.mousedown(function(e) {$this = $(this);var position = $(this).position();this.posix = {'x': e.pageX - position.left, 'y': e.pageY - position.top};$.extend(document, {'move': true, 'move_target': this});})//旋转$imgWap.on('mousedown', '.zhuan', function(e) {var _pageX;//鼠标x距离var _pageY;//鼠标y距离var _offX;//顶点x距离，固定的var _offY;//顶点x距离，固定的var _oX;//中心点坐标，固定的var _oY;//中心点坐标，固定的_offX = $imgWap.offset().left;_offY = $imgWap.offset().top;$.extend(document, {'move': true, 'call_down': function(e) {_pageX = e.pageX;_pageY = e.pageY;_oX = $imgWap.width()/2+_offX;_oY = $imgWap.height()/2+_offY;var _jiaodu;var _plusJiaodu;var a,b,c;a = Math.abs(_oY - _pageY);b = Math.abs(_oX - _pageX);//第一象限_plusJiaodu = Math.atan(($imgWap.height()/2)/($imgWap.width()/2))*180/Math.PI;_jiaodu = Math.atan(a/b)*180/Math.PI;if(_pageX<_oX&&_pageY<_oY){console.log("第一象限")_jiaodu = _jiaodu -_plusJiaodu}//第二象限if(_pageX>_oX&&_pageY<_oY){console.log("第二象限:")_jiaodu = 180 - _jiaodu - _plusJiaodu}//第三象限if(_pageX>_oX&&_pageY>_oY){console.log("第三象限")_jiaodu = 180 + _jiaodu -_plusJiaodu}//第四象限if(_pageX<_oX&&_pageY>_oY){console.log("第四象限:"+_jiaodu)_jiaodu = 360 - _jiaodu -_plusJiaodu}console.log(_jiaodu)$imgWap.rotate(_jiaodu)}});return false;});//缩放$imgWap.on('mousedown', '.suo', function(e) {var posix = {'w': $imgWap.width(), 'h': $imgWap.height(), 'x': e.pageX, 'y': e.pageY};$.extend(document, {'move': true, 'call_down': function(e) {var width = Math.max(50, e.pageX - posix.x + posix.w)if(width>718){width=718}$imgWap.css({'width': width,'height': width});}});return false;});//删除$imgWap.on('mousedown', '.shan', function(e) {$imgWap.remove();});
};