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

简易进度条

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

为了实现上面效果，我们先来分析页面结构：一个基本的大容器，用来存放所有相关的东西：左侧是进度条相关部分，右侧用来显示百分比的数字，其中左侧又分为通过宽度变化来显示进度的一部分和可拖动的手柄部分。因为手柄部分是可以拖动的，所以要采用相对定位，初始化时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. windows 10 下sublime text 3配置c/c++编译环境

    来源于在网上各种帖子,自己成功配置之后写作笔记: 检查环境变量 首先配置重定义环境变量,过程如下: 创建一个test.c文件 内容: #include <stdio.h> int main ...

  2. 初识Odoo的辅助核算

    Odoo财务里类似辅助核算功能的叫做:Analytic Accouting,翻译为,分析会计. 再说说辅助核算是个什么东东. 财务辅助核算就是基于会计科目和会计理论分析财务数据的辅助工具. 简单的说就 ...

  3. HDU1272小希的迷宫–并查集

    上次Gardon的迷宫城堡小希玩了很久(见Problem B),现在她也想设计一个迷宫让Gardon来走.但是她设计迷宫的思路不一样,首先她认为所有的通道都应该是双向连通的,就是说如果有一个通道连通了 ...

  4. (0-1)CSS 标签语法的属性

    CSS text-decoration 属性 display display 属性规定元素应该生成的框的类型

  5. 《DSP using MATLAB》Problem 5.14

    说明:这两个小题的数学证明过程都不会,欢迎博友赐教. 直接上代码: %% +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ...

  6. python os模块使用笔记（更新）

    import os 添加os模块 walk方法: os.walk(path) path是string形式的目标目录 生成一个某目录下递归树形目录迭代器,方便递归访问子目录,访问目录就能够轻松访问子文件 ...

  7. 【BZOJ4554】【TJOI2016】【HEOI2016】游戏

    我好弱啊quq 原题: 在2016年,佳缘姐姐喜欢上了一款游戏,叫做泡泡堂.简单的说,这个游戏就是在一张地图上放上若干个炸弹,看 是否能炸到对手,或者躲开对手的炸弹.在玩游戏的过程中,小H想到了这样一 ...

  8. 【shell编程】之基础知识了解shell

    一.什么是shell Shell 是一个用 C 语言编写的程序,它是用户使用 Linux 的桥梁.Shell 既是一种命令语言,又是一种程序设计语言. Shell 是指一种应用程序,这个应用程序提供了 ...

  9. MACOS-Can't-connect-to-local-MySQL-server-through-socket-'/tmp/mysql.sock'

    mac os start mysql fail by "brew services start mysql"you can try : mysql.server  start

  10. ClusterControl docker 环境搭建

    ClusterControl 是一款比较强大的数据库管理平台,包含了丰富的数据库管理功能. 我们可以用来方便的进行数据管理 测试使用docker-compose 管理 环境准备 docker-comp ...