html自定义拖动进度条,包含样式和事件

时间: 2018-09-20阅读: 923标签: 事件

自定义可拖动的进度条,如下图效果:


代码分三部分

HTML

<body>
    <div id="demo">

        <div class="progress">
            <div class="progress-bar">
                <div class="progress-thumb"></div>
            </div>
        </div>

    </div>
</body>


CSS

#demo { 
    width: 600px; height: 100px; margin: 100px auto; 
    display: flex; align-items: center; 
}

#demo .progress { 
    width: 100%; height: 6px; border-radius: 3px; 
    background: #F1F5FD; 
}

#demo .progress .progress-bar { 
    width: 40%; height: 100%; border-radius: 3px; 
    background: #0072FF; 
}

#demo .progress .progress-bar .progress-thumb { 
    width: 14px; height: 14px; border-radius: 50%; 
    background: #FFFFFF; box-shadow: 0 0 15px 5px #0072FF; 
    float: right; 
    position: relative; left: 7px; top: -5px; 
}


到这步就基本实现了自定义的样式,只需改变 .progress-bar 的 width 就能显示不同的进度;接下来给进度条加上拖动事件


JavaScript

<script>
           
        var slider = {
            use: function(id) {
                var self = this;
                self.slider = document.getElementById(id);
                self.bar = self.slider.querySelector('.progress-bar');
                self.thumb = self.slider.querySelector('.progress-thumb');
                self.slider.addEventListener('mousedown', function(e) {
                    if (e.button == 0) { // 判断点击左键
                        self.mDown = true;
                        self.beginX = e.offsetX;
                        self.positionX = e.offsetX;
                        self.beginClientX = e.clientX;
                        self.sliderLong = parseInt(self.getStyle(self.slider, 'width'));
                        var per = parseInt(self.positionX / self.sliderLong * 100);
                        self.bar.style.width = per + '%';
                    }
                });
                document.addEventListener('mousemove', function(e) {
                    if (self.mDown) {
                        var moveX = e.clientX - self.beginClientX;
                        self.positionX = (self.beginX + moveX > self.sliderLong) ? self.sliderLong : (self.beginX + moveX < 0) ? 0 : self.beginX + moveX;
                        var per = parseInt(self.positionX / self.sliderLong * 100);
                        self.bar.style.width = per + '%';
                    }
                });
                document.addEventListener('mouseup', function(e) {
                    if (e.button == 0) { 
                        self.mDown = false;
                    }
                });
            },
            getStyle: function(obj,styleName){ // 获取元素样式的方法
                if(obj.currentStyle){
                    return obj.currentStyle[styleName];
                }else{
                    return getComputedStyle(obj,null)[styleName];
                }
            }
        };
        slider.use('demo');

    </script>


关于本篇随笔,作者的考虑:

1. 将 mousedown 事件绑定在进度条的包裹层而非进度条本身,这是参考了主流视频播放器的效果后的设计,为了优化用户体验

2. JS 用纯原生语法书写,如果用 JQuery 可以简化选择器和 CSS 样式的获取

3. 鼠标在滚动条外的移动,本文使用 clientX 来计算

来源:http://www.cnblogs.com/liangzhengxiong/p/9650342.html

vue的事件冒泡

先说冒泡,我们都知道水中有气泡的时候,气泡会从水底往上升,由深往浅的。但是水在上升的过程中会经历不同的深度的水。那么我们再来解释一下什么是事件冒泡

jquery的bind跟on绑定事件的区别

Jquery的bind跟on绑定事件的区别:主要是事件冒泡(事件代理);jquery文档中bind和on函数绑定事件的用法:.bind(events [,eventData], handler);.on(events [,selector] [,data], handler)

原生js实现trigger方法

事件绑定成功之后,事件的执行函数就如同待字闺中的小姑娘。除了由坐在电脑前的大叔们用键盘、鼠标等硬件行为触发外,需要在代码中直接调用又该如何实现?

NodeJS事件

触发器Emitter会触发命名事件eventName来调用函数Listener,移除指定事件的指定监听器:emitter.removeListener(eName, listener)、emitter.off(eName,listener) 设置监听器最大绑定值:emitter.setMaxListeners(n)

JavaScript 事件

客户端 JavaScript 程序采用了异步事件驱动编程模型、事件不是 JavaScript 对象,不会出现在程序源代码中、事件类型是一个用来说明发生什么类型事件的字符串,有时会称之为事件名字

jQuery on()方法使用

本文实例讲述了jQuery中on()方法用法。分享给大家供大家参考。具体分析如下:此方法可以在匹配元素上绑定一个或者多个事件处理函数。使用off()方法可以删除on()方法绑定的事件。

JavaScript模拟事件的注意要点

DOM中的事件模拟三个步骤: 首先通过document.createEvent()方法创建event对象,接收一个参数,即表示要创建的事件类型的字符串:UIEvents(DOM3中的UIEvent)鼠标和键盘事件

手写事件代理函数

面试是不是听过无数遍呢 !今天我们来手写一个这样的事件委托函数,它是通过事件冒泡机制,即子元素上触发的事件会冒泡到父级上, 即父级也会触发该类型的事件

Selenium WebDriver 中鼠标和键盘事件分析及扩展

在使用 Selenium WebDriver 做自动化测试的时候,会经常模拟鼠标和键盘的一些行为。比如使用鼠标单击、双击、右击、拖拽等动作;或者键盘输入、快捷键使用、组合键使用等模拟键盘的操作

Js中的事件委托/事件代理

什么叫事件委托/事件代理呢 ?JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全