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

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

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

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

把贴子都结贴。

账号		自动登录	找回密码
密码			立即注册