滚动条在前端页面中是进行见到的，但是在不同的浏览器中，默认的滚动条样式不同，有些浏览器的默认样式也不好更改，因此，我们可以自定义滚动条，接下来就从一个实例开始进入滚动条。

简易进度条

首先要实现的是上面的这种效果：当鼠标拖拽手柄前后移动时，滚动条的填充色和右侧的百分比随之一起变化。

为了实现上面效果，我们先来分析页面结构：一个基本的大容器，用来存放所有相关的东西：左侧是进度条相关部分，右侧用来显示百分比的数字，其中左侧又分为通过宽度变化来显示进度的一部分和可拖动的手柄部分。因为手柄部分是可以拖动的，所以要采用相对定位，初始化时left为0；初始化的时候，进度为0，所以宽度变化的部分在初始化的时候，宽度为0。具体的结果如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>进度条</title>

    <style>

        *{

            margin: 0;

            padding: 0;

            list-style: none;

            border: none;

        }

        #progress{

            width: 700px;

            height: 30px;

            line-height: 30px;

            margin: 100px auto;

            position: relative;

        }

        #progress_bar{

            width: 600px;

            height: 100%;

            background-color: #ccc;

            border-radius: 20px;

            position: relative;

        }

        #progress_value{

            position: absolute;

            right: 30px;

            top: 0;

        }

        #progress_bar_fg{

            width: 0;

            height: 100%;

            background-color: rgb(0, 162, 255);

            border-top-left-radius: 20px;

            border-bottom-left-radius: 20px;

        }

        span{

            width: 20px;

            height: 41px;

            background-color: rgb(0, 162, 255);

            position: absolute;

            left: 0;

            top: -6px;

            border-radius: 5px;

            cursor: pointer;

        }

    </style>

</head>

<body>

    <div id="progress">

        <div id="progress_bar">

            <div id="progress_bar_fg"></div>

            <span></span>

        </div>

        <div id="progress_value">0%</div>

    </div>

</body>

</html>

接下来就是事件处理了，简单的整理一下思路：

  • 手柄的鼠标事件，根据每次鼠标的坐标变化来改变手柄的相对定位。
  • 手柄的left值就是进度条变化的部分的宽度
  • 变化部分的宽度与整个进度条的宽度比就是右边部分的百分比值。
<script>

    window.onload = function () {

        //获取需要的标签

        var progress = document.getElementById("progress");

        var progress_bar = progress.children[0];

        var progress_bar_fg = progress_bar.children[0];

        var mask = progress_bar.children[1];

        var progress_value =  progress.children[1];

        //监听鼠标按下

        mask.onmousedown = function (event) {

            var e = event || window.event;

            //获取初始位置(鼠标的坐标位置是相对整个屏幕的，但手柄的移动是相对于滚动条容器的，所以需要进行减法操作)

            var offsetLeft = event.clientX - mask.offsetLeft;

            //监听鼠标的移动

            document.onmousemove = function (event) {

                var e = event || window.event;

                //获取移动的位置

                var x = e.clientX - offsetLeft;

                // 边界值处理

                if(x < 0){

                    x = 0;

                }else if(x >= progress_bar.offsetWidth - mask.offsetWidth){

                    x = progress_bar.offsetWidth - mask.offsetWidth;

                }

                //根据鼠标移动运动起来

                mask.style.left = x + 'px';

                progress_bar_fg.style.width = x + 'px';

                progress_value.innerHTML = parseInt(x / (progress_bar.offsetWidth - mask.offsetWidth) * 100) + '%';

                return false;

            };

            //监听鼠标抬起

            document.onmouseup = function () {

                document.onmousemove = null;

            }

        }

    }

</script>

好啦，简易的滚动条效果就做好了。

完整详细代码下载：点这里

JS之滚动条效果的更多相关文章

  1. JS之滚动条效果2

    在前面一篇说的是滚动条效果,本篇继续在前面的基础上面针对滚动条进行操作.本次要实现的效果如下:拖动滚动条左右移动时,上面的图片内容也相对外层盒子做相对移动. 下面针对要实现的效果进行分析:首先是页面基 ...

  2. html和js实现滚动条效果

    HTML部分 <!-- 遮罩层 --> <div id="zzc" style="z-index:-1;height:100%;width: 100%; ...

  3. jQuery实现模拟滚动条效果；

    滚动条在web开发中,很常见,原生的HTML滚动条很难看,因此很多网站借助JS来模拟实现滚动条效果: 滚动条的实现原理其实比较简单,拿垂直滚动条来说: 1),最外层容器需要设置overflow:hid ...

  4. js网页滚动条滚动事件实例分析

    本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...

  5. js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox

    做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的 ...

  6. JS模拟滚动条(有demo和源码下载,支持拖动 滚轮 点击事件)

    由于游览器自带的滚动条在美观方面并不是很好看,所以很多设计师希望通过自己设计出来的滚动条来做这样的效果,JS模拟滚动条其实很早看到jQuery有这样的插件或者KISSY有这样的组件,一直想着自己什么时 ...

  7. js判断滚动条是否已到页面最底部或顶部实例

    原文 本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法.分享给大家供大家参考.具体分析如下: 我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了,否则就自动隐 ...

  8. CSS实现导航栏底部动态滚动条效果

    预习了CSS3部分的新知识,想着在不使用JS的情况下实现导航栏滚动条效果,如下: 实现滚动条效果,其实就是在<li></li>标签中让<span>元素的宽度由0变化 ...

  9. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

随机推荐

  1. Node.js内置的文件系统模块（fs）

    异步读取文件 按照js的标准,异步读取一个文本文件的格式如下: 'use strict' const fs = require('fs') fs.readFile('test.txt', 'utf-8 ...

  2. POJ 2456： Aggressive cows（二分，贪心）

    Aggressive cows Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 20485   Accepted: 9719 ...

  3. 集合框架 ArrayList LinkedList（待续）

    ArrayList中存储的元素的内存空间是连续的, LinkedList内存空间不是连续的 集合对象不能被序列化到硬盘中 http://blog.csdn.net/eson_15/article/de ...

  4. int &p

    int &p为引用,而int p为定义变量.二者区别如下:1 引用在定义的时候必须赋值,否则编译会出错.正确的形式为int &p = a;其中a为int型变量.2 引用在定义时不会分配 ...

  5. java-Random类

    1.Random类的概述和方法使用 * A:Random类的概述 * 此类用于产生随机数 * 如果用相同的种子创建两个 Random 实例,则对每个实例进行相同的方法调用序列,它们将生成并返回相同的数 ...

  6. （5）MySQL的查询：模糊查询（通配符查询like）、限制符查询（limit）、排序查询（order by）、分组查询（group by）、（子查询）

    注意事项 指令语法的优先级: where > group by >order by > limit 例:select count(id) as cnt,age from tablen ...

  7. GinKgoCTF-Misc

    一:谁动了我的校徽? Jpg改txt——>寻找——>GKCTF{This_is_a_huaji} 二:奇怪的压缩包1 六位数字的密码一点也不安全!!!!!! 下载压缩包——>有密码( ...

  8. Python基础之二进制

    引子 首先,计算机一共就能做两件事:计算和通信 那在讲计算机之前,我们先来讲一个故事,大家知道古时候的中国是如何通信的么? 假如,战国时期两个国家要打仗了,我们垒了城墙,每隔一段就有兵镇守,现在有人来 ...

  9. hdu3642 Get The Treasury 线段树--扫描线

    Jack knows that there is a great underground treasury in a secret region. And he has a special devic ...

  10. 使用distillery&&docker 部署phoenix 应用

      distillery 发布了2.0 了,有好多的新的功能 config prodiver 进行环境变量的配置 appup tansforms 插件系统,方便在release 构建的时候进行修改 m ...