进度条案例和水平滚动条（鼠标事件，event事件，offset）

最新推荐文章于 2022-07-03 17:31:20 发布
最新推荐文章于 2022-07-03 17:31:20 发布
阅读量421 收藏
点赞数
分类专栏： webapi
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zh__quan/article/details/97651876
版权

目录

 

进度条

水平滚动条

进度条

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            border: none;
        }
        
        #progress {
            width: 1000px;
            height: 35px;
            line-height: 35px;
            /*background-color: #e8e8e8;*/
            margin: 100px auto;
            position: relative;
        }
        
        #progress_bar {
            width: 900px;
            height: 100%;
            background-color: #ccc;
            border-radius: 8px;
            position: relative;
        }
        
        #progress_value {
            position: absolute;
            right: 30px;
            top: 0;
        }
        
        #progress_bar_fg {
            width: 0;
            height: 100%;
            background-color: orangered;
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
        }
        
        span {
            width: 25px;
            height: 50px;
            background-color: orangered;
            position: absolute;
            left: 0;
            top: -7px;
            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>

    <script>
        window.onload = function() {
            // 1. 获取需要的标签
            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];

            // 2. 监听鼠标按下
            mask.onmousedown = function(event) {
                var e = event || window.event;

                // 2.1 获取初始位置
                var offsetLeft = e.clientX - mask.offsetLeft;

                // 2.2 监听鼠标的移动
                document.onmousemove = function(event) {
                    var e = event || window.event;

                    // 2.3 获取移动的位置
                    var x = e.clientX - offsetLeft;

                    // 边界值处理
                    if (x < 0) {
                        x = 0;
                    } else if (x >= progress_bar.offsetWidth - mask.offsetWidth) {
                        x = progress_bar.offsetWidth - mask.offsetWidth;
                    }

                    // 2.4 走起来
                    mask.style.left = x + 'px';
                    progress_bar_fg.style.width = x + 'px';

                    // 因为进度条是百分比，所以 *100 显示
                    progress_value.innerHTML = parseInt(x / (progress_bar.offsetWidth - mask.offsetWidth) * 100) + '%';

                    // 如果不return 会和下面的鼠标抬起事件冲突
                    return false;
                };

                // 2.5 监听鼠标抬起
                document.onmouseup = function() {
                    document.onmousemove = null;
                }
            }
        }
    </script>
</body>

</html>

水平滚动条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            border:none;
        }

        #box{
            width: 800px;
            height: 200px;
            border: 1px solid #ddd;

            position: relative;
            margin: 100px auto;

            overflow: hidden;
        }

        #box ul{
            width: 2600px;
            position: absolute;
            left: 0;
            top: 20px;
        }

        #box ul li{
            float: left;
        }

        #box_bottom{
            position: absolute;
            left: 0;
            bottom: 0;
            background-color: #e8e8e8;

            width: 100%;
            height: 25px;
        }

        .mask{
            position: absolute;
            left: 0;
            top:0;
            height: 25px;
            background-color: orangered;
            border-radius: 12px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul id="box_top">
            <li><img src="images/img1.jpg" alt=""></li>
            <li><img src="images/img2.jpg" alt=""></li>
            <li><img src="images/img3.jpg" alt=""></li>
            <li><img src="images/img4.jpg" alt=""></li>
            <li><img src="images/img5.jpg" alt=""></li>
            <li><img src="images/img6.jpg" alt=""></li>
            <li><img src="images/img7.jpg" alt=""></li>
            <li><img src="images/img8.jpg" alt=""></li>
            <li><img src="images/img1.jpg" alt=""></li>
            <li><img src="images/img2.jpg" alt=""></li>
            <li><img src="images/img1.jpg" alt=""></li>
            <li><img src="images/img2.jpg" alt=""></li>
            <li><img src="images/img3.jpg" alt=""></li>
            <li><img src="images/img4.jpg" alt=""></li>
            <li><img src="images/img5.jpg" alt=""></li>
            <li><img src="images/img6.jpg" alt=""></li>
            <li><img src="images/img7.jpg" alt=""></li>
            <li><img src="images/img8.jpg" alt=""></li>
            <li><img src="images/img1.jpg" alt=""></li>
            <li><img src="images/img2.jpg" alt=""></li>
        </ul>
        <div id="box_bottom">
            <span class="mask"></span>
        </div>
    </div>

<script>
    window.onload = function () {
        // 1. 获取需要的标签
        var box = document.getElementById("box");
        var box_top = document.getElementById("box_top");
        var box_bottom = document.getElementById("box_bottom");
        var mask = box_bottom.children[0];

        // 2. 设置滚动条的长度
        // 滚动条长度 = ( 盒子的宽度 / 内容的宽度) * 盒子的宽度
        var mask_len = (box.offsetWidth / box_top.offsetWidth) * box.offsetWidth;
        mask.style.width = mask_len + 'px';

        // 3. 鼠标操作
        mask.onmousedown = function (event) {
            var e = event || window.event;

            // 3.1 求出初始值
            var beginX = e.clientX - mask.offsetLeft;

            // 3.2 移动
            document.onmousemove = function (event) {
                var e = event || window.event;

                // 3.3 求出移动的距离
                var endX = event.clientX - beginX;

                // 边界值
                if(endX < 0){
                    endX = 0;
                }else if(endX >= box.offsetWidth - mask.offsetWidth){
                    endX = box.offsetWidth - mask.offsetWidth;
                }


                // 3.4 动起来
                mask.style.left = endX + 'px';

                // 内容走的距离 = （内容的长度 - 盒子的长度） \/ (盒子长度 - 滚动条的长度) * 滚动条走的距离
                var content_len = (box_top.offsetWidth - box.offsetWidth) / (box.offsetWidth - mask.offsetWidth) * endX;
                box_top.style.left = -content_len + 'px';

                return false;
            };

            document.onmouseup = function () {
                document.onmousemove = null;
            }
        }
    }
</script>
</body>
</html>

 

 

 

 

 

 

 

zh__quan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript监听滚动条的进度条
employerboos的博客
10-27 541
<style type="text/css"> *{ margin: 0; padding: 0; } .g-box{ width: 100%; height: 4000px; background-color: #1AB1CC; } .progress{ width: 6px; height: 0%; background-color: deeppink; position: fixed;..
iOS自定义水平滚动条、进度条
08-26
滚动条和进度条可以用来显示进度、进度、评分等信息，今天我们将详细介绍如何自定义水平滚动条和进度条。 首先，我们需要继承UIView创建一个自定义的滚动条类HWSlider。在HWSlider中，我们需要添加轨道、滑块、气泡...
十五、JavaScript进度条的制作
微信号：RunsenLiu
03-25 466
进度条 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; pad...
Android 水平滚动条 SmoothProgressBar
05-12 157
http://www.oschina.net/p/smoothprogressbar 转载于:https://www.cnblogs.com/fgjTarget/p/3723652.html
进度条滑动条控件
weixin_30258027的博客
01-04 138
进度条控件cc.ui.UILoadingBar.new(table)--[[参数 table{ scale9 boolean类型 表示是否缩放 canInsets, cc.rect类型 社会图片的缩放区域 避免银缩放导致图片失真 image string类型 表示进图条图片 viewRect cc.rect类型 表示显示区域 percent int 类型 表示初始值进...
event 事件 自定义滚动条 控制文字滚动
weixin_33737134的博客
03-13 69
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #parent{ width: 600px; height: 20px; ...
ios-水平滚动条、进度条.zip
07-11
自定义水平滚动条、进度条，继承UIView，可点击轨道、滑动滑块交互。 CSDN博客：http://blog.csdn.net/hero_wqb/article/details/78965106。 语言：Objective-C
WPF WIn8样式滚动条和进度条
06-30
在Windows Presentation Foundation (WPF) 中，为应用程序创建与Windows 8风格相匹配的滚动条和进度条可以提升用户界面的现代感和一致性。本文将深入探讨如何在WPF项目中实现Windows 8样式的滚动条和进度条，并提供...
Vue的事件响应式进度条组件实例详解
11-28
找了很多vue进度条组件，都不包含拖拽和点击事件，input range倒是原生包含input和change事件，但是直接基于input range做进度条的话，样式部分需要做大量调整和兼容性处理。即使做好了，将来需要修改外观，又是一番...
滑动条（Slider），进度条（ProgressBar）运用
07-06
WPF开发过程中少不了有些界面加载等待，不能没有过度界面处理你不然显得软件如同卡死了一般，用户体验极度不好。这需要使用到各种样式的进度条过渡处理展示些细节提醒用户。有些参数的调整一味的使用文本框调整太生硬可以考虑使用滑动条，例如声音的调节等等。
多线程进度条（事件触发）
05-27
通过事件触发实现进度条的滚动，使用多线程防止界面假死
HTML5中的进度条progress元素简介及兼容性处理
09-27
HTML5能够用progress标签直接向页面添加进度条,这还是相当exciting的,不过各浏览器下的默认显示效果会有差异,这里我们就来看看HTML5中的进度条progress元素简介及兼容性处理
HTML5触摸事件实现移动端简易进度条
weixin_34262482的博客
05-01 283
前言 HTML中新添加了许多新的事件，但由于兼容性的问题,许多事件都没有广泛的应用，接下来为大家介绍一些好用的移动端触摸事件: touchstart、touchmove、touchend。 介绍 下面我们来简单介绍一下这几个事件: touchstart： 当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 touchmove：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调...
实现页面或元素内容水平滚动
m0_71631193的博客
07-03 1010
鼠标滚轮默认是用来控制垂直滚动的。当水平内容溢出时，溢出的内容展示可以通过滚轮来控制将会大大提示用户使用体验。scrollLeft属性用来表示滚动条到左边内容的距离，类型为number。在实现水平滚动效果时，改变该属性的值，页面就会移动一定距离。详见scrollLeft。当鼠标滚轮向前滚动一轮，scrollLeft属性减小一定大小；当鼠标滚轮向后滚动一轮，scrollLeft属性增加一定大小。 减小和增大的值可以用一个数据（状态）来表示，这个数据就是下面要用到的deltaY，deltaY的值为正对应增加，为
js实现进度条的拖拽_☆*往事随風*☆的博客
☆往事随風☆的博客
06-14 3095
文章目录前言一、代码分析1.搭建一个进度条2.对进度条进行一定的样式修改3.对进度条应用js代码4.js整体代码5.运行结果总结 前言 利用js实现一个进度条拖拽的demo。 一、代码分析 1.搭建一个进度条 html代码如下（示例）： <!-- 外部容器 --> <div class="wrappers"> <!-- 包裹进度条 --> <div class="wrapper"> <
Jquery实现可拖动进度条demo
LQL1990188的博客
06-21 443
html 　　　　<div class="progress"> <div class="progress_bg"> <div class="progress_bar"></div> </div> <div ...
如何只给仪表盘的进度条设置鼠标移动事件
最新发布
06-07
如果你只想给仪表盘的进度条设置鼠标移动事件，可以通过 `series-gauge-axisPointer` 来实现。`series-gauge-axisPointer` 是一个子属性，可以用来设置仪表盘的指针（即进度条）的样式和事件。你可以在 `option` 对象的 `series` 数组中指定这个属性，例如： ```javascript var option = { series: [{ type: 'gauge', // ... axisPointer: { show: true, type: 'line', lineStyle: { width: 2, color: '#999' }, handle: { show: true, size: 20, color: 'auto' }, // 注册事件 triggerOn: 'mousemove', // 回调函数 onHandleDrag: function(params) { console.log(params); } }, // ... }] }; ``` 在这个例子中，我们通过 `axisPointer` 属性来设置仪表盘的指针样式和事件。我们将 `show` 属性设置为 `true`，这样指针就会显示出来。我们还指定了指针的颜色、大小等样式属性，这些属性都是可选的，你可以根据自己的需要进行设置。 最重要的是，我们通过 `triggerOn` 属性来指定事件触发的方式，这里我们将其设置为 `mousemove`，表示只有在鼠标移动时才会触发事件。我们还通过 `onHandleDrag` 属性来注册了一个事件，这个事件会在用户拖动指针时触发。回调函数的参数 `params` 包含了事件的详细信息，例如指针的坐标等等。 值得注意的是，我们并没有将 `triggerTooltip` 属性设置为 `true`，这样用户在移动指针时不会触发提示框。如果你需要提示框，可以将这个属性设置为 `true`。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值