图片拖拽、旋转、缩放、移动

来源：互联网发布：战术无线通信与网络编辑：程序博客网时间：2024/05/29 16:48

下面代码图片链接换成自己的就可以用了

<!DOCTYPE html><html lang="en"><head>    <title>图片拖拽、旋转、缩放、移动</title>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <meta http-equiv="Content-Language" content="zh-CN" />    <meta http-equiv="x-ua-compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title></title>    <style type="text/css">        *{            margin: 0;            padding: 0;            /*ff stop copy*/            -moz-user-select:none;        }        table{            width: 100%;            border-spacing: 8px;        }        td{            border: 1px solid gray;        }        .ltd{            width: 60%;            height: 900px;            overflow: hidden;        }        .drawingBoard{            width: 100%;            height: 100%;            position: relative;            overflow: hidden;        }        .drawingBoard .rel_img{           cursor:move;        }        .line_center_s{             background: #ddd;            border: 1px solid #000;            position: absolute;            width: 15px;            height: 15px;            top: -15px;            left: 50%;            border-radius: 50%;        }        .line_center_s:link,.line_center_s:visited,.line_center_s:hover,.line_center_s:active{            cursor: url("images/rotate_arrow.cur"),crosshair;        }        .rtd{            width: 40%;            height: 900px;        }        div.panel{            width: 100%;            height: 100%;        }        a.cloth{            display: block;            float: left;            text-decoration: none;            border: 1px solid transparent;            margin: 6px -3px -3px 6px;            padding: 2px;            cursor: pointer;        }        a.cloth:hover{            border: 1px solid gray;        }    </style></head><body><table>    <tr>        <td class="ltd">            <div class="drawingBoard" ondrop="drop(event)" ondragover="allowDrop(event)">            </div>        </td>        <td class="rtd">            <div class="panel">                <a class="cloth" ><img src="images/cloth_1.jpg" data-url="images/cloth_1.png"></a>                <a class="cloth" ><img src="images/cloth_2.jpg" data-url="images/cloth_2.png"></a>                <a class="cloth" ><img src="images/cloth_3.jpg" data-url="images/cloth_3.png"></a>            </div>        </td>    </tr></table><script  type="text/javascript" src="js/jquery-1.11.3.js"></script><script type="text/javascript" src='js/zooming.js'></script><script type="text/javascript">    jQuery(function(){       // document.ondragstart=function() {return false;}//禁止生成新链接        document.onselectstart=function(){return false;}//禁止鼠标全选住图片        $(".panel .cloth img").each(function(){            //开始拖拽            this.ondragstart=function(event){                var  img_path= jQuery(this).attr("data-url");//图片地址                event.dataTransfer.setData("Text",img_path);                //  console.log(img_path);            }        });        //点击非图片位置去所有图片样式        $(".drawingBoard").on('click',function(event) {            event.preventDefault();             event.stopPropagation();            //隐藏样式           hideStyle();        });        //点击图片去样式        $(".drawingBoard").on('click', '.rel_img', function(event) {            event.preventDefault();            event.stopPropagation();           //隐藏样式           hideStyle();           //显示自己的样式            $(this).find(".zoom").show();           $(this).css({               border: '1px solid gray'           });           $(this).find(".line_center").show();           $(this).find(".line_center_s").show();           zooming.add(this);        });        // 旋转        var  rotate=0;        $(".drawingBoard").on('mousedown','.rel_img .line_center_s', function(e) {                  e.preventDefault();            e.stopPropagation();            //设置类drawingBoard鼠标样式为自定义            $(".drawingBoard").css({                cursor: "url('images/rotate_arrow.cur'),crosshair"            });            var x=e.clientX,                y=e.clientY,                cloth_width=$(this).parent().css("width"),                cloth_height=$(this).parent().css("height"),                position_x=$(this).parent().offset().left,                position_y=$(this).parent().offset().top,                //图片中心点                cx=parseInt(position_x)+parseInt(cloth_width)/2,                cy=parseInt(position_y)+parseInt(cloth_height)/2,                curentEle=this;                var anglePre=countDeg(cx,cy,x,y);//获取前一次的角度值            $(document).on('mousemove', function(e) {                e.preventDefault();                e.stopPropagation();                var curr_x=e.clientX;                var curr_y=e.clientY;                var angleNext=countDeg(cx,cy,curr_x,curr_y);//获取后一次的角度值                var new_rotate=angleNext-anglePre;                rotate+=new_rotate;                anglePre=angleNext;               $(curentEle).parent().css({                "transform":"rotate("+rotate+"deg)",                '-ms-transform':"rotate("+rotate+"deg)",                "-webkit-transform":"rotate("+rotate+"deg)"               });            });        }).mouseup(function() {            $(document).off("mousemove");            $(".drawingBoard").css({                cursor: "default"            });        });    });    //进入目标上    function allowDrop(event) {        event.preventDefault();    }    //进入目标区域    var _zindex=10;//全局z-index值    function drop(event) {        event.preventDefault();        event.stopPropagation();        var data=event.dataTransfer.getData("Text");//获取实际大小图片地址        var x=event.clientX;        var y=event.clientY;        // FIXME         var _x=x-80;        var _y=y-105;        //隐藏样式        hideStyle();        var rel_img_div="<div  class='rel_img'  style='position: absolute;left:"+_x+"px;top:"+_y+"px;"+                                "border: 1px solid #999;z-index:"+_zindex+";' >"+                           "<img  onmousedown='myMousedown(this,event)'   onload='Tzoom(this)' src="+data+" style='width:160px;height:210px;'>"+                           "<div class='line_center_s'></div>"+                        "</div>";        jQuery(".drawingBoard").append(rel_img_div);        _zindex+=1;    }    //鼠标按下    function myMousedown(t,e){        e.preventDefault();        e.stopPropagation();        //鼠标按下位置        var x=e.clientX;        var y=e.clientY;         //图片位置         var _left=parseInt($(t).parent().css("left"));         var _top=parseInt($(t).parent().css("top"));        //鼠标移动        this.onmousemove=function(e){            //鼠标移动前一点            var _x= e.clientX;            var _y= e.clientY;            var new_x=_x-x;            var new_y=_y-y;            //鼠标移动后一点            x=e.clientX;            y=e.clientY;            //图片新位置            _left=_left+new_x;            _top=_top+new_y;            $(t).parent().css({left:_left+"px",top:_top+"px"});            //鼠标抬起            this.onmouseup=function(){                this.onmousemove=null;            }        }    }    //隐藏样式    function hideStyle(){          $(".drawingBoard .rel_img").find(".zoom").hide();           $(".drawingBoard .rel_img").css({               border: '0 solid gray'           });           $(".drawingBoard .rel_img").find(".line_center").hide();           $(".drawingBoard .rel_img").find(".line_center_s").hide();    }    //计算角度值    var countDeg=function(cx,cy,pointer_x,pointer_y){        var ox=pointer_x-cx;        var oy=pointer_y-cy;        var to=Math.abs(ox/oy);        var angle = Math.atan( to )/( 2 * Math.PI ) * 360;//鼠标相对于旋转中心的角度        if( ox < 0 && oy < 0)//相对在左上角，第四象限，js中坐标系是从左上角开始的，这里的象限是正常坐标系              {                  angle = -angle;              }else if( ox < 0 && oy > 0)//左下角,3象限              {                  angle = -( 180 - angle )              }else if( ox > 0 && oy < 0)//右上角，1象限              {                  angle = angle;              }else if( ox > 0 && oy > 0)//右下角，2象限              {                  angle = 180 - angle;              }        return angle;    }</script></body></html>

js/zooming.js 代码

    var zooming=function(e){      e=window.event ||e;      var o=this,data=e.wheelDelta || -e.detail*40,zoom,size;      if(!+'\v1'){//IE          zoom = parseInt(o.style.zoom) || 100;           zoom += data / 12;          if(zoom > zooming.min)               o.style.zoom = zoom + '%';          e.returnValue=false;      }else {          size=o.getAttribute("_zoomsize").split(",");          zoom=parseInt(o.getAttribute("_zoom")) ||100;          zoom+=data/12;          if(zoom>zooming.min){              o.setAttribute("_zoom",zoom);              o.style.width=size[0]*zoom/100+"px";              o.style.height=size[1]*zoom/100+"px"         }          e.preventDefault();//阻止默认行为          e.stopPropagation();//for Firefox3.6      }  };  zooming.add=function(obj,min){//第一个参数指定可以缩放的图片，min指定最小缩放的大小 ,default to 50      zooming.min=min || 50;      obj.onmousewheel=zooming;      if(/Firefox/.test(navigator.userAgent))//if Firefox          obj.addEventListener("DOMMouseScroll",zooming,false);      if(-[1,]){//if not IE          obj.setAttribute("_zoomsize",obj.offsetWidth+","+obj.offsetHeight);      }  };  // window.onload=function(){//放在onload中，否则非ie中会无法计算图片大小出错  //     zooming.add(document.getElementById("testimg1"));  // } //t:元素对象function Tzoom(t){     zooming.add(t);}

0 0