设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 为何右侧和下侧盒子会移到外面去一半，没有卡住。
返回列表 发新帖
查看: 1994|回复: 2

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

[复制链接]
小黄练编程
发表于 2022-4-5 23:06:39 | 显示全部楼层 |阅读模式

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

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

x
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>放大框</title>
  6.                 <style>
  7.                 .one{
  8.                         position:relative;
  9.                         width:500px;
  10.                         height:500px;
  11.                         margin:0 auto;
  12.                         background-color:gold;
  13.                 }
  14.                 .twoo{
  15.                         position:absolute;
  16.                         top:0;
  17.                         left:0;
  18.                         width:200px;
  19.                         height:200px;
  20.                         background-color:rgba(100,100,100,.4);//字不会有透明效果。
  21.                         /* opacity:0.8; *///字有透明效果。
  22.                 }
  23.                
  24.                
  25.                 </style>
  26.         </head>
  27.         <body>
  28.                 <div class='one'>
  29.                         <div class='twoo'>222</div>
  30.                 </div>
  31.                 <script>
  32.                 const one=document.querySelector('.one');
  33.                 const twoo=document.querySelector('.twoo');
  34.                 twoo.addEventListener('mousedown',function(e){
  35.                         document.addEventListener('mousemove',move);
  36.                         function move(e){
  37.                                 var x=e.pageX-one.offsetLeft;
  38.                                 var y=e.pageY-one.offsetTop;
  39.                               twoo.style.top=y-(twoo.offsetHeight/2)+'px';
  40.                                   twoo.style.left=x-(twoo.offsetWidth/2)+'px';
  41.                                   console.log( twoo.style.top,twoo.style.left);
  42.                                   if(x-(twoo.offsetWidth/2)<0){
  43.                                           twoo.style.left=0+'px';
  44.                                   }
  45.                                   else if(x-(twoo.offsetWidth) >=one.offsetWidth-twoo.offsetWidth){
  46.                                           twoo.style.left=one.offsetWidth-twoo.offsetWidth+'px';
  47.                                   }
  48.                                   if(y-(twoo.offsetHeight/2)<0){
  49.                                           twoo.style.top=0;
  50.                                   }
  51.                                   else if(y-(twoo.offsetHeight)>=one.offsetHeight-twoo.offsetHeight){
  52.                                           twoo.style.top=one.offsetHeight-twoo.offsetHeight+'px';
  53.                                   }
  54.                                   console.log(one.offsetWidth-twoo.offsetWidth+'px');
  55.                         };
  56.                         document.addEventListener('mouseup',function(){
  57.                                 document.removeEventListener('mousemove',move);
  58.                         });
  59.                 });
  60.                
  61.                 </script>
  62.         </body>
  63. </html>
复制代码
最佳答案
月排行榜 / 总排行榜
ba21
2022-4-6 15:48:28
本帖最后由 ba21 于 2022-4-6 15:51 编辑
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>放大框</title>
  6.                 <style>
  7.                 .one{
  8.                         position:relative;
  9.                         width:500px;
  10.                         height:500px;
  11.                         margin:0 auto;
  12.                         background-color:gold;
  13.                 }
  14.                 .twoo{
  15.                         position:absolute;
  16.                         top:0;
  17.                         left:0;
  18.                         width:200px;
  19.                         height:200px;
  20.                         background-color:rgba(100,100,100,.4);//字不会有透明效果。
  21.                         /* opacity:0.8; *///字有透明效果。
  22.                 }
  23.                
  24.                
  25.                 </style>
  26.         </head>
  27.         <body>
  28.                 <div class='one'>
  29.                         <div class='twoo'>222</div>
  30.                 </div>
  31.                 <script>
  32.                 const one=document.querySelector('.one');
  33.                 const twoo=document.querySelector('.twoo');
  34.                 twoo.addEventListener('mousedown',function(e){
  35.                         document.addEventListener('mousemove',move);
  36.                         function move(e){

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

  43.                                   if(x-(twoo.offsetWidth/2)<0){
  44.                                           twoo.style.left=0+'px';
  45.                                   }
  46.                                   if(x-(twoo.offsetWidth/2) >=one.offsetWidth-twoo.offsetWidth){
  47.                                            twoo.style.left=one.offsetWidth-twoo.offsetWidth+'px';
  48.                                   }
  49.                                  
  50.                                   if(y-(twoo.offsetHeight/2)<0){
  51.                                           twoo.style.top=0+'px';
  52.                                   }
  53.                                   if(y-(twoo.offsetHeight/2)>=one.offsetHeight-twoo.offsetHeight){
  54.                                           twoo.style.top=one.offsetHeight-twoo.offsetHeight+'px';
  55.                                   }

  57.                         };
  58.                         document.addEventListener('mouseup',function(){
  59.                                 document.removeEventListener('mousemove',move);
  60.                         });
  61.                 });
  62.                
  63.                 </script>
  64.         </body>
  65. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

ba21
发表于 2022-4-6 15:48:28 | 显示全部楼层    本楼为最佳答案   
本帖最后由 ba21 于 2022-4-6 15:51 编辑
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>放大框</title>
  6.                 <style>
  7.                 .one{
  8.                         position:relative;
  9.                         width:500px;
  10.                         height:500px;
  11.                         margin:0 auto;
  12.                         background-color:gold;
  13.                 }
  14.                 .twoo{
  15.                         position:absolute;
  16.                         top:0;
  17.                         left:0;
  18.                         width:200px;
  19.                         height:200px;
  20.                         background-color:rgba(100,100,100,.4);//字不会有透明效果。
  21.                         /* opacity:0.8; *///字有透明效果。
  22.                 }
  23.                
  24.                
  25.                 </style>
  26.         </head>
  27.         <body>
  28.                 <div class='one'>
  29.                         <div class='twoo'>222</div>
  30.                 </div>
  31.                 <script>
  32.                 const one=document.querySelector('.one');
  33.                 const twoo=document.querySelector('.twoo');
  34.                 twoo.addEventListener('mousedown',function(e){
  35.                         document.addEventListener('mousemove',move);
  36.                         function move(e){

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

  43.                                   if(x-(twoo.offsetWidth/2)<0){
  44.                                           twoo.style.left=0+'px';
  45.                                   }
  46.                                   if(x-(twoo.offsetWidth/2) >=one.offsetWidth-twoo.offsetWidth){
  47.                                            twoo.style.left=one.offsetWidth-twoo.offsetWidth+'px';
  48.                                   }
  49.                                  
  50.                                   if(y-(twoo.offsetHeight/2)<0){
  51.                                           twoo.style.top=0+'px';
  52.                                   }
  53.                                   if(y-(twoo.offsetHeight/2)>=one.offsetHeight-twoo.offsetHeight){
  54.                                           twoo.style.top=one.offsetHeight-twoo.offsetHeight+'px';
  55.                                   }

  57.                         };
  58.                         document.addEventListener('mouseup',function(){
  59.                                 document.removeEventListener('mousemove',move);
  60.                         });
  61.                 });
  62.                
  63.                 </script>
  64.         </body>
  65. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

ba21
发表于 2022-4-6 15:51:21 | 显示全部楼层
把贴子都结贴。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-5-12 11:08

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表