原生JS+CSS或HTML5实现简单的进度条和滑动条效果

更新日期: 2018-01-04阅读: 5.2k标签: 进度条

前言

我个人非常喜欢js+css的强大表现能力,这也是我喜欢前端开发的原因之一,后端通常都是在和数据打交道,很多东西都是抽象的数据结构,不直观也不美观,而前端着重于界面视图的渲染以及各种各样有意思的交互效果,其中像我们在客户端中见到的安装进度条效果以及滑块拖动效果,使用js+css都能够在页面中进行模拟,并且方法也并不复杂.我这里进行了简单的效果实现,记录一下以作巩固


1.进度条效果实现

效果展示:


 

基本思想:

这里主要使用了CSS3的animation动画效果,将进度条设置为一个初始宽度为0,背景色为绿色,高度与容器相同的元素,通过animation对其宽度进行动画过渡,以实现进度条填充的效果.

 

以下为代码实现,可以作为参考:

html:

<!--外层容器-->
<div id="wrapper">
    <!--进度条容器-->
    <div id="progressbar">
        <!--用来模仿进度条推进效果的进度条元素-->
        <div id="fill"></div>
    </div>
</div>

css:

#wrapper{
    position: relative;
    width:200px;
    height:100px;
    border:1px solid darkgray;
}
#progressbar{
    position: absolute;
    top:50%;
    left:50%;
    margin-left:-90px;
    margin-top:-10px;
    width:180px;
    height:20px;
    border:1px solid darkgray;

}
/*在进度条元素上调用动画*/
#fill{
    animation: move 2s;
    text-align: center;
    background-color: #6caf00;
}
/*实现元素宽度的过渡动画效果*/
@keyframes move {
    0%{
        width:0;

    }
    100%{
        width:100%;
    }
}

js:

var progressbar={
    init:function(){
        var fill=document.getElementById('fill');
        var count=0;
    //通过间隔定时器实现百分比文字效果,通过计算CSS动画持续时间进行间隔设置
        var timer=setInterval(function(e){
            count++;
            fill.innerHTML=count+'%';
            if(count===100) clearInterval(timer);
        },17);
    }
};
progressbar.init();


HTML5下的实现:

强大的HTML5提供了一种新的标签<progress>,只需要通过该标签+简单的js,即可以实现进度条滚动的效果。


代码如下:

HTML

<progress max="100" value="0" id="pg"></progress>

 这个标签意义很明确,并且属性只有以上两个,max表示需要完成的任务量,value是目前完成的任务量。

js

var pg=document.getElementById('pg');
 setInterval(function(e){
      if(pg.value!=100) pg.value++;
      else pg.value=0;
},100);

以上的实现方式不仅更加的语义化,同时也极大的简化了我们的代码,并且灵活性更高,所以熟练使用HTML5是非常有必要的!

不过HTML5标签的浏览器兼容性也是我们需要考虑的一个问题,所以如果网页需求的兼容性比较高的话,特别是对低版本IE有兼容需求的话,那么HTML5的标签就不太适用了。以下为<progress>的浏览器支持情况。


 

2.滑动条效果实现

效果展示:


 

基本思想:

滑动条其实就是进度条的进阶,进度条是自动填充整个容器,滑动条是实现可自己控制的填充效果.

整个滑动条主要分为三个部分,即滑动条容器,滑块,填充块.

在这里我主要实现了两个功能:

1.点击滑动条的任意部分,自动调整滑块位置并调整填充情况

2.拖拽滑块进行填充调整

第一个功能的实现非常的简单,首先将滑块设置成绝对定位,然后只需要在滑动条区域内绑定click事件,然后读取鼠标事件的offsetX属性,确定鼠标位置相对于滑动条左侧的距离,然后设置滑块的left来调整滑块位置以及填充块的宽度.

第二个功能的实现稍微复杂一点,因为要模拟一个拖拽的效果,这里使用到了三个鼠标事件mousedown,mousemove,mouseup.

1.当我们按住滑块时,触发mousedown事件,在这个事件处理里面我们不需要做太多的事情,只需要修改一个状态,将滑块从不允许拖拽的状态变成允许拖拽.

2.然后触发mousemove,让滑块和填充块跟随鼠标移动.

3.当释放鼠标时,触发mouseup事件,将滑块从允许拖拽的状态变成不允许拖拽.

 

以下为代码实现,可以作为参考:

html:

<!--外层容器-->
<div id="wrapper">
    <!--填充块-->
    <div id="fill"></div>
    <!--滑块-->
    <div id="slider"></div>
</div>

css:

#wrapper{
    position: relative;
    width:200px;
    height:20px;
    border:1px solid darkgray;
}
/*将滑块和填充块设置成inline-block,保证他们在同一行内*/
#slider{
    position: absolute;
    left:0;
    width:20px;
    height:20px;
    display: inline-block;
    background-color: #af58a8;
    cursor:pointer;
}
#fill{
    display: inline-block;
    width:0;
    height:20px;
    background: #6caf00;
}

js:

var slider=(function(){
    init=function(){
        var wrapper=document.getElementById('wrapper');
        var slider=document.getElementById('slider');
        var fill=document.getElementById('fill');
        move(wrapper,slider,fill);
    };
    move=function(dom1,dom2,dom3){
    //drag用来存储滑块允许拖拽和不允许拖拽的状态
        var drag=0;
    //在滑动条上绑定click事件以实现点击任意位置,自动调整滑块和填充块的效果
        dom1.addEventListener('click',function (e) {
            if(e.target===dom2){
            //点击滑块自身不做任何事情                
            }else{
                if(e.offsetX>180) {
                    dom2.style.left='180px';
                    dom3.style.width='180px';
                }else if(e.offsetX<20){
                    dom2.style.left='0px';
                    dom3.style.width='0px';
                }else{
                    dom2.style.left=e.offsetX-10+'px';
                    dom3.style.width=e.offsetX-10+'px';
                }
            }
        });
        //修改drag的状态        
        dom2.addEventListener('mousedown',function(){
            drag=1;
        });
        //释放按钮绑定在document上,保证在整个页面容器里面任何地方松开按钮都能修改drag的状态        
        document.addEventListener('mouseup',function(){
            drag=0;
        });
        // 使滑块和填充块跟随移动,这里使用的pageX,需要计算和视窗左侧的距离而不是和滑动块左侧的距离       
        dom1.addEventListener('mousemove',function(e){
            if(drag==1){
                if(e.pageX>189) {
                    dom2.style.left='180px';
                    dom3.style.width='180px';
                }else if(e.pageX<29){
                    dom2.style.left='0px';
                    dom3.style.width='0px';
                }else{
                    dom2.style.left=e.pageX-19+'px';
                    dom3.style.width=e.pageX-19+'px';
                }
            }
        });

    };
    return {
        init:init
    }
})();
slider.init();

 

HTML5下的实现:

既然进度条在HTML5下有了专门的标签,那么滑动条呢?经过查询发现,虽然没有设置滑动条的标签,但是HTML5在input的type属性中新增了一个值range,正是我们需要的滑动条。可见input并不局限于提供输入框,它能够实现的控件非常的丰富,有很多控件都是可以在input中找到的。

该控件效果如下:


 

代码如下:

html

<input type="range" name="points" min="1" max="10" />

甚至都不需要JS来控制,只需要一行html代码,即可实现完整的滑动条效果。


链接: https://fly63.com/article/detial/312

CSS3+JS实现静态圆形进度条

首先,我们来一个圆(黑色)。接着,再来两个半圆,将黑色的圆遮住。(为了演示,左右两侧颜色不一样),这时候,我们顺时针旋转右侧蓝色的半圆,下面的黑色圆就会暴露出来,比如我们旋转45度(12.5%),效果出来了。

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

将 mousedown 事件绑定在进度条的包裹层而非进度条本身,这是参考了主流视频播放器的效果后的设计,为了优化用户体验,鼠标在滚动条外的移动,本文使用 clientX 来计算

jQuery 实现一个文章阅读进度条功能

阅读进度虽然没啥具体的用处,但是我突然想起来了,随便做做也是极好的,获取元素 offset 高度、元素高度、滑动距离就能实现了

利用canvas实现环形进度条

有时候在项目中会有用到进度条的情况,使用css3也可以实现,但是对于性能不好的设备,或者网络不好的情况下,卡顿现象非常明显,避免出现不流畅的尴尬情况,所以记录一下,使用canvas来实现的方法。

在vue项目中使用Nprogress.js进度条

NProgress是一款在网页顶部添加细长进度条的工具,非常轻巧,使用起来也非常便捷,灵感来源于Google, YouTube。在路由页面跳转使用,同样在main.js中:

svg生成环形进度条

之前在项目中遇到一个环形进度条的需求,要求能实时更新进度,脑海中瞬间便蹦出css,svg,canvas3中方案,对于3种方案个人更偏向于svg,用法简单,代码量也很少,同时也便于实时控制。具体效果如下图:

js实现进度条代码

现在很多网站会用到进入网站特效,到网页没有加载完成的时候,会有一个loding特效,加载完了之后才能看到页面,今天就带着做一个js进度条效果,今天要做的效果是纯js进度条加载,没有用到框架

css进度条怎么写?

进度条经常运用于网页,即使我们意识到不是所有的东西都将瞬间被加载完成,这些进度条用于提醒使用者关于网页上具体的任务进程,譬如上传,下载,加载应用程序等。

AngularJS实现进度条功能示例

这篇文章主要介绍了AngularJS实现进度条功能,结合具体完整实例形式分析了AngularJS实现进度条功能的原理、相关知识点与注意事项,需要的朋友可以参考下

纯css设置单选框/进度条样式

设置radio样式原理:使用 :checked+label 切换样式图片。checkbox也可以这么做。进度条样式原理:为三个页面的进度条分别设置不同的value,由此切换背景图片。

点击更多...

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