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

简易进度条

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

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

    detect_hand.py 分水岭算法: 任何一幅灰度图像都可以被看成拓扑平面,灰度值高的区域可以被看成是山峰,灰度值低的区域可以被看成是山谷.我们向每一个山谷中灌不同颜色的水,随着水的位的升高,不 ...

  2. HashSet remove（）

    HashSet继承自Set接口的方法:boolean remove(Object o); case1: public class ShortTest { public static void main ...

  3. 调试 shell script 方法

    wade@V1088:~$ cat b.sh#!/bin/bash dir=`pwd` dir=$dir'/' for f in `ls *.png` do echo $dir$f done 看每一行 ...

  4. mysql中文编码问题

    我比较推荐的方法是在创建数据库时便设置中文编码 create database bp default character set utf8; #注意是utf8不是utf-8 以下方法只适用于mysql ...

  5. MySQL Export--导出数据

    =========================================================== SELECT INTO OUTFILE语法格式: SELECT [columns ...

  6. pgbench 安装试用

    pgbench 是一个方便的pg 性能测试工具,以下是简单的测试试用 安装 安装pg yum install https://download.postgresql.org/pub/repos/yum ...

  7. gaia 开源多语言的pipeline 平台

    gaia 是一个支持goalng.java.c++.python,nodejs (还在开发中)的pipeline 平台,我们可以方便的进行pipeline构建的 添加,同时也可以做为sdk 在我们的项 ...

  8. HI3516EV100 RTMP添加音频

    1.先试试只发音频 失败 2.保存音频,发送视频,成功

  9. Mysql5.6 for Centos6.5源码编译安装

    ## 说明 不同服务器需要改变 server_id ,同一台机器上需要改变 port 1. 关闭防火墙[root@mysql ~]# service iptables status --查看防火墙状态 ...

  10. “更新时间”字段的：ON UPDATE CURRENT_TIMESTAMP 含义

    "更新时间"字段的:ON UPDATE CURRENT_TIMESTAMP 含义: 表示在数据库数据有更新的时候UPDATE_TIME的时间会自动更新(如果数据库数据值没有变化的话 ...