码迷,mamicode.com
首页 > 其他好文 > 详细

滑动条

时间:2019-07-28 11:01:08      阅读:96      评论:0      收藏:0      [点我收藏+]

标签:doctype   oct   null   cursor   relative   return   charset   back   bsp   

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>滑动条</title>
     <style type="text/css">
         .box{
            width: 400px;
            height: 8px;
            background-color: #ccc;
            margin: 100px auto;
            position: relative;
         }
         .box .bar{
            width: 10px;
            height: 20px;
            background-color: #369;
            position: absolute;
            top: -6px;
            left: 0;
            cursor: pointer;
         }
         .box .mask{
            width: 0px;
            height: 100%;
            background-color: #369;
         }
     </style>
</head>
<body>
     <div class="box" id="box">
         <div class="bar" id="bar"></div>
         <div class="mask" id="mask"></div>
     </div>
     <script type="text/javascript">
         function $(id){
            return document.getElementById(id);
         }
         var bar = $(‘bar‘);
         //onclick事件,是鼠标点击下去,然后松开手才会触发
         //onmousedown事件,是鼠标点击下去就触发
         bar.onmousedown = function(event){
            var evt = event || window.event;
            var mLeft = evt.clientX - bar.offsetLeft;
            document.onmousemove = function(event){
                var evt = event || window.event;
                var barX = evt.clientX - mLeft;
                if(barX < 0){
                    barX = 0;
                }
                if(barX > (bar.parentNode.offsetWidth - bar.offsetWidth)){
                    barX = (bar.parentNode.offsetWidth - bar.offsetWidth)
                }
                bar.style.left = barX + ‘px‘;
                $(‘mask‘).style.width = barX + ‘px‘;
                window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
            }
            //一定要在bar.onmousedown内部注册,否则不起作用
            document.onmouseup = function(){
                document.onmousemove = null;
            }
         }
     </script>
</body>
</html>

滑动条

标签:doctype   oct   null   cursor   relative   return   charset   back   bsp   

原文地址:https://www.cnblogs.com/mmit/p/11258116.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!