拖动图片四周进行放大缩小,和拖动时进行网格宽高定位

随声 发布于 07/18 17:58
阅读 24
收藏 0

下面有一个轮播图,可以把轮播图中的图片进行鼠标按住拖动复制到div网格中,然后有个开关按钮进行判断,开的话就是把复制进去的图片在网格中随意进行放大缩小功能,还有一个就是判断关,关的话就是把拖进去的图片只能放到格子中,不能只显示半格,也是要能拖动大小,而且可以随意拖动到哪个格子中进行放大缩小,可以拖成长方形正方形都可以,放大也最大就是占满整个div网格。

图1,随意拖动写好了,就是不知道怎么拖动图片四周进行放大缩小。

附上拖动复制的js:

<script>
    $(document).ready(function(){
        $(function() {
            $(".nav-imgs").draggable({
                revert : 'invalid',
                opacity : 0.7,
                helper : 'clone',
                scope : 'drop'
            });
            $(".row").droppable({
                scope : 'drop',
                drop : function(event, ui) {
                    var ud = ui.draggable;
                    if (ud.draggable("option", "helper") == "clone") {
                        ud.clone().appendTo($(".row")).css({
                            position : 'absolute',
                            left : ui.offset.left,
                            top : ui.offset.top
                        }).draggable({
                            scope : 'drop',
                            revert : 'invalid'
                        }).resizable();
                    }
                },
                out : function(event, ui) {
                    ui.draggable.remove();
                }
            });

        });

        $(function() {
            $(".ui-widget-conten").resizable();
        });
    });
    </script>

附上拖动和按住图片四边进行缩放的html+css+js:

<style type="text/css">
    .chr {cursor: e-resize;}
    .cvr {cursor: s-resize;}
    .cner {cursor: ne-resize;}
    .cnwr {cursor: nw-resize;}
    .cdft {cursor: default;}
    .cmove {cursor: move;}
</style>
</head>
<body>
    <img src="image/p1.png" style="width: 300px; position: absolute; left: 100px; top: 100px;" class="cdft" id="imgsrc"/>
    <img src="image/p2.png" style="width: 300px; position: absolute; left: 100px; top: 200px;" class="cdft" />
    <img src="image/p3.png" style="width: 300px; position: absolute; left: 100px; top: 300px;" class="cdft" />
    <img src="image/p4.png" style="width: 300px; position: absolute; left: 100px; top: 400px;" class="cdft" />
     <script type="text/javascript">  
            var img=document.getElementById('imgsrc');  
            var span=10;  
            var isDrag=null;  
            var isIE=!!document.all;  
            var ox,oy,ex,ey,ow,oh,chrPosX=false,chrPosY=false;  
            var percent=img.offsetHeight/img.offsetWidth;  
            function mouseMove(e){  
              e=e||event;  
              var x=e.offsetX||e.layerX,y=e.offsetY||e.layerY,imgW=img.offsetWidth,imgH=img.offsetHeight;  
              if((x<=span&&y<=span)||(x>=imgW-span&&y>=imgH-span))img.className='cnwr';  
              else if((x<=span&&y>=imgH-span)||(y<=span&&x>=imgW-span))img.className='cner';  
              else if(x<=span||x>=imgW-span)img.className='chr';  
              else if(y<=span||y>=imgH-span)img.className='cvr';  
              else img.className='cdft';  
                
            }  
            function mouseDown(e){  
              e=e||event;  
              ex=e.clientX;//保存当前鼠标X轴的坐标  
              ey=e.clientY;//保存当前鼠标y轴的坐标  
              ox=parseInt(img.style.left);  
              oy=parseFloat(img.style.top);  
              if(img.className=='cdft'){  
                isDrag=true;  
                img.className='cmove';  
              }  
              else{  
                isDrag=false;  
                oh=img.offsetHeight;//获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度  
                ow=img.offsetWidth;  
                var x=e.offsetX||e.layerX,y=e.offsetY||e.layerY;//相对容器的水平坐标,相对容器的垂直坐标  
                chrPosX=x<=span;  
                chrPosY=y<=span;  
                if(e.ctrlKey){//事件属性可返回一个布尔值,指示当事件发生时,Ctrl 键是否被按下并保持住  
                   ow=oh/percent;//根据比例计算出宽度  
                   img.style.width=ow;//更新图片宽度  
                }  
              }  
              if(isIE)img.setCapture();    
              document.onmousemove=mouseDownAndMove;  
              img.onmousemove=null;  
              return false;  
            }  
            function mouseDownAndMove(e){  
              e=e||event;  
              if(isDrag===true){  
                img.style.left=ox+e.clientX-ex+'px';  
                img.style.top=oy+e.clientY-ey+'px';  
              }  
              else if(isDrag===false){  
                var x=e.clientX-ex,y=e.clientY-ey;  
                switch(img.className){  
                  case 'chr':  
                    x=chrPosX?-x:x;  
                    y=e.ctrlKey?percent*x+oh:oh;  
                    img.style.width=ow+x+'px';  
                    img.style.height=y+'px';  
                    if(chrPosX)img.style.left=ox-x+'px';  
                    break;  
                  case 'cvr':  
                    y=chrPosY?-y:y;  
                    x=e.ctrlKey?y/percent+ow:ow;  
                    img.style.width=x+'px';  
                    img.style.height=oh+y+'px';  
                    if(chrPosY)img.style.top=oy-y+'px';  
                    break;  
                  case 'cnwr':  
                  case 'cner':  
                    x=chrPosX?-x:x;  
                    if(e.ctrlKey){//按宽等比  
                      y=e.ctrlKey?percent*x+oh:oh;  
                      img.style.width=ow+x+'px';  
                      img.style.height=y+'px';  
                      if(chrPosX)img.style.left=ox-x+'px';  
                    }  
                    else{            
                      y=chrPosY?-y:y;  
                      img.style.width=ow+x+'px';  
                      img.style.height=oh+y+'px';  
                      if(chrPosX)img.style.left=ox-x+'px';  
                      if(chrPosY)img.style.top=oy-y+'px';  
                    }  
                    break;  
                }  
              }  
            }  
            img.onmousemove=mouseMove;  
            img.onmousedown=mouseDown;  
            document.onmouseup=function(){  
              if(typeof isDrag=="boolean"){  
                if(isIE)img.releaseCapture();//函数的作用就是将后续的mouse事件都发送给这个对象  
              }  
              isDrag=null;  
              img.className='cdft';  
              img.onmousemove=mouseMove;  
              document.onmousemove=null;  
            }  
           
        </script>   

原文:https://blog.csdn.net/yangjun2002/article/details/84092397

我在网上只找到一个人是这样写的,但我又不太会写js,应为我有多张图,他用的时Id来获取值的,也不知道怎么把两个功能合在一起

加载中
返回顶部
顶部