图片旋转，拖拽，缩放，删除一体

引入我写的基样式

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

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>

html部分

<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>

引入用到的在线js插件

<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>

js部分（拖拽，旋转，删除，缩放）

//调用方法
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();
    });
};

 

转载于:https://www.cnblogs.com/wangmiao2606/p/4680895.html