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

最新推荐文章于 2025-05-04 11:21:22 发布

转角遇到我得爱

最新推荐文章于 2025-05-04 11:21:22 发布

阅读量2.2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： jQuery js 文章标签：图片

本文链接：https://blog.youkuaiyun.com/u014737974/article/details/47446611

js 同时被 2 个专栏收录

10 篇文章

订阅专栏

jQuery

3 篇文章

订阅专栏

本文介绍了一个基于HTML、CSS和JavaScript的图片操作示例，包括图片的拖拽、旋转、缩放和移动等功能。通过简单的代码实现，展示了如何使用事件监听器进行交互，并提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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


<!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);
}