小黄练编程 发表于 2022-4-5 23:06:39

为何右侧和下侧盒子会移到外面去一半，没有卡住。

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>放大框</title>
                <style>
                .one{
                        position:relative;
                        width:500px;
                        height:500px;
                        margin:0 auto;
                        background-color:gold;
                }
                .twoo{
                        position:absolute;
                        top:0;
                        left:0;
                        width:200px;
                        height:200px;
                        background-color:rgba(100,100,100,.4);//字不会有透明效果。
                        /* opacity:0.8; *///字有透明效果。
                }
               
               
                </style>
        </head>
        <body>
                <div class='one'>
                        <div class='twoo'>222</div>
                </div>
                <script>
                const one=document.querySelector('.one');
                const twoo=document.querySelector('.twoo');
                twoo.addEventListener('mousedown',function(e){
                        document.addEventListener('mousemove',move);
                        function move(e){
                                var x=e.pageX-one.offsetLeft;
                                var y=e.pageY-one.offsetTop;
                              twoo.style.top=y-(twoo.offsetHeight/2)+'px';
                                  twoo.style.left=x-(twoo.offsetWidth/2)+'px';
                                  console.log( twoo.style.top,twoo.style.left);
                                  if(x-(twoo.offsetWidth/2)<0){
                                          twoo.style.left=0+'px';
                                  }
                                  else if(x-(twoo.offsetWidth) >=one.offsetWidth-twoo.offsetWidth){
                                          twoo.style.left=one.offsetWidth-twoo.offsetWidth+'px';
                                  }
                                  if(y-(twoo.offsetHeight/2)<0){
                                          twoo.style.top=0;
                                  }
                                  else if(y-(twoo.offsetHeight)>=one.offsetHeight-twoo.offsetHeight){
                                          twoo.style.top=one.offsetHeight-twoo.offsetHeight+'px';
                                  }
                                  console.log(one.offsetWidth-twoo.offsetWidth+'px');
                        };
                        document.addEventListener('mouseup',function(){
                                document.removeEventListener('mousemove',move);
                        });
                });
               
                </script>
        </body>
</html>

ba21 发表于 2022-4-6 15:48:28

本帖最后由 ba21 于 2022-4-6 15:51 编辑

<!DOCTYPE html>
<html>
      <head>
                <meta charset="utf-8">
                <title>放大框</title>
                <style>
                .one{
                        position:relative;
                        width:500px;
                        height:500px;
                        margin:0 auto;
                        background-color:gold;
                }
                .twoo{
                        position:absolute;
                        top:0;
                        left:0;
                        width:200px;
                        height:200px;
                        background-color:rgba(100,100,100,.4);//字不会有透明效果。
                        /* opacity:0.8; *///字有透明效果。
                }
               
               
                </style>
      </head>
      <body>
                <div class='one'>
                        <div class='twoo'>222</div>
                </div>
                <script>
                const one=document.querySelector('.one');
                const twoo=document.querySelector('.twoo');
                twoo.addEventListener('mousedown',function(e){
                        document.addEventListener('mousemove',move);
                        function move(e){

                              var x=e.pageX-one.offsetLeft;
                              var y=e.pageY-one.offsetTop;
                                  twoo.style.top=y-(twoo.offsetHeight/2)+'px';
                                  twoo.style.left=x-(twoo.offsetWidth/2)+'px';

                                  if(x-(twoo.offsetWidth/2)<0){
                                          twoo.style.left=0+'px';
                                  }
                                  if(x-(twoo.offsetWidth/2) >=one.offsetWidth-twoo.offsetWidth){
                                           twoo.style.left=one.offsetWidth-twoo.offsetWidth+'px';
                                  }
                                 
                                  if(y-(twoo.offsetHeight/2)<0){
                                          twoo.style.top=0+'px';
                                  }
                                  if(y-(twoo.offsetHeight/2)>=one.offsetHeight-twoo.offsetHeight){
                                          twoo.style.top=one.offsetHeight-twoo.offsetHeight+'px';
                                  }

                        };
                        document.addEventListener('mouseup',function(){
                              document.removeEventListener('mousemove',move);
                        });
                });
               
                </script>
      </body>
</html>

ba21 发表于 2022-4-6 15:51:21

把贴子都结贴。
页: [1]
查看完整版本: 为何右侧和下侧盒子会移到外面去一半，没有卡住。