进度条的拖拽

最新推荐文章于 2025-05-17 13:36:09 发布

原创最新推荐文章于 2025-05-17 13:36:09 发布 · 772 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

11 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
       *{margin: 0;padding: 0;}
       .father{width:500px;height:30px;border:1px solid #ccc;margin:50px auto 0;position:relative;}
       .son{width:30px;height:30px;background: #f00;position:absolute;top:0;left:0;}
       .brother{width:500px;height:480px;background: #f23;margin:20px 0 0 280px;}
   </style>
</head>
<body>
   <div class="father" id="father">
       <div class="son" id="son"></div>
   </div>
   <div class="brother" id="brother"></div>

               if(l<=0){
                   l=0;
               }else if(l>=W){
                   l=W;
               }
               oSon.style.left=l+"px";

           var w=500*l/W;
           oB.style.width=w+"px";
           oB.style.height=480*l/W+"px";

               // oSon.style.top=t+"px";
               return false;
           }
           document.onmouseup=function(){
               document.onmousemove=null;
           }
       }
   </script>
</body>
</html>

加油 !