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

简易进度条

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

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

    Need: 为那些饥肠辘辘而又囊中羞涩的铁大同学提供最新最全的美食信息. Approach: 跑遍铁大所有角落,收集所有关于美食的信息,主要是价格口味方面,口味方面会通过学生的打分来数量化,建立一个库 ...

  2. c++——数据结构

    1.写一个函数PrintN,使得传入一个N,打印从1到N的全部整数 #include<stdio.h> //循环实现 void PrintN(int N){ int i; ;i<=N ...

  3. YIT-CTF—隐写术

    一:小心心 下载图片——>改后缀名为TXT——>打开发下最后一行有flag 二:双生 下载两张图片——>应为题目说的是双生——>想到可能是两张图片的叠加——>打开图片查看 ...

  4. python:代码复用与函数递归

    #recursion.py:打印斐波那契数列 def fact(n): if n==1 or n==2: return 1 else: return fact(n-1)+fact(n-2) while ...

  5. MATLAB中版本和日期函数

    本博客中输出版本号和日期的子函数,今天才发现忘记上代码了,这里补上 function banner() %% --------------------------------------------- ...

  6. 转：《Javascript模块化编程》

    (一):模块的写法 转载至:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html (二):AMD规范 转载至:http://www ...

  7. 将本地项目上传到git/码云

    idea查看任意项目的远程仓库地址: git remote -v git branch -v git branch -d  分支名          删除本地分支 git branch -D  分支名 ...

  8. vue全家桶+Koa2开发笔记(5)--nuxt

    1. nuxt项目初始化报错 下面是使用 koa 模板方法初始化一个项目,使用该方法需要将 nuxt 的版本降至1.4.2: 官方 https://zh.nuxtjs.org/guide/instal ...

  9. MySQL--时间戳属性2

    在MySQL 5.6版本中引入参数explicit_defaults_for_timestamp设置,该参数会影响Timestamp的默认属性. 同时在MySQL 5.6版本中中,去除一张表只能有一个 ...

  10. Unity 5.x Shader and Effects Cookbook(2nd) (Alan Zucconi Kenneth Lammers 著)

    1. Creating Your First Shader 2. Surface Shaders and Texture Mapping 3. Understanding Lighting Model ...