拖拽——拖动进度条显示进度

最新推荐文章于 2021-10-13 17:27:46 发布
最新推荐文章于 2021-10-13 17:27:46 发布
阅读量3.1k 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Queue_ningmeng/article/details/88275263
版权

拖拽——拖动进度条显示进度

拖动进度条代码

 

<!doctype html>
<html>
<head>
   <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function (e) {
            //设置最大值
            ScrollBar.maxValue = 30;
            //初始化
            ScrollBar.Initialize();
        });
        var ScrollBar = {
            value: 10,
            maxValue: 30,
            step: 1,
            currentX: 0,
            Initialize: function () {
                if (this.value > this.maxValue) {
                    alert("给定当前值大于了最大值");
                    return;
                }
                this.GetValue();
                $("#scroll_Track").css("width", this.currentX + 2 + "px");
                $("#scroll_Thumb").css("margin-left", this.currentX + "px");
                this.Value();
                $("#scrollBarTxt").html(ScrollBar.value + "/" + ScrollBar.maxValue);
            },
            Value: function () {
                var valite = false;
                var currentValue;
               
                $("#scrollBar").mousedown(function () {
                    valite = true;
                    $(document).mousemove(function (e) {
                        var event = e || window.event;
                        
                        if (valite == false) return;
                        
                        currentValue = event.clientX - $('#scrollBar').offset().left ;
                        
                        $("#scroll_Thumb").css("margin-left", currentValue + "px");
                        $("#scroll_Track").css("width", currentValue + 2 + "px");
                        //超出限制
                        if ((currentValue + 25) >= $("#scrollBar").width()) {
                            $("#scroll_Thumb").css("margin-left", $("#scrollBar").width() - 25 + "px");
                            $("#scroll_Track").css("width", $("#scrollBar").width() + 2 + "px");
                            ScrollBar.value = ScrollBar.maxValue;
                        } else if (currentValue <= 0) {
                            $("#scroll_Thumb").css("margin-left", "0px");
                            $("#scroll_Track").css("width", "0px");
                        } else {
                            ScrollBar.value = parseInt(currentValue*30 / $("#scrollBar").width());
                        }
                        $("#scrollBarTxt").html(ScrollBar.value + "/" + ScrollBar.maxValue);
                    });
                });
                $(document).mouseup(function () {
                    
                    $(this).unbind('mousedown');
                    $(this).unbind('mousemove');
                });
            },
            GetValue: function () {
                this.currentX = $("#scrollBar").width() * (this.value / this.maxValue);
            }
        }
    </script>
<style type="text/css">
body{
    user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
}
#Main {
    width: 70%;
    height: 300px;
    margin: 0 auto;
    margin-top: 10px;
}
#scrollBar {
    width: 80%;
    height: 10px;
    background-color: #ccc;
    margin: 0 auto;
    margin-top: 50px;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    cursor: pointer;
}
#scroll_Track {
    width: 0px;
    height: 10px;
    background-color: #ff4400;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}
#scroll_Thumb {
    height: 25px;
    width: 25px;
    background-color: #efefef;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    border: 1px solid #ccc;
    -webkit-box-shadow: 0px 0px 5px #ccc;
    -moz-box-shadow: 0px 0px 5px #ccc;
    box-shadow: 0px 0px 5px #ccc;
    position: absolute;
    margin-top: -18px;
    cursor: pointer;
}
#scroll_Thumb:hover {
    background-color: #ff4400;
    border: 1px solid #fff;
}
.progressTime {
            filter: alpha(opacity=50);
            -moz-opacity: 0.5;
            -khtml-opacity: 0.5;
            opacity: 0.5;
            position: absolute;
            _position: fixed;
            left: 25%;
            top:25%;
            Z-INDEX: 2;
            border: 1px solid gray;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            color: white;
            background: #000;
            width: 660px;
            height:200px;
            padding-top: 0px;
            padding-bottom: 0px;
        }
</style>
</head>
<body>

    <div id="Demo" class="progressTime" >
        <div id="Main">
          <div id="scrollBar">
            <div id="scroll_Track"></div>
            <div id="scroll_Thumb"></div>
          </div>
          <p id="scrollBarTxt" style="text-align:center;"></p>
    </div>

</body>

</html>
View Code

 

效果图

结论

这段代码只是实现了效果 ，可维护性不是那么高。 但是通过这个无意中解决了一个bug：鼠标抬起解绑mousemove、mousedown事件，然后鼠标抬起还是会拖动。不知道怎么解决，我给body加了一个user-select：none;之后这个bug没了！

posted @ 2017-03-02 14:16 _只鱼 阅读( ...) 评论( ...) 编辑 收藏
isNemo
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生js实现可拖拽进度条效果
07-11
原生js实现可拖拽进度条效果 特效 左右滑动进度条
可拖动的圆形进度条
10-20
Android定义View，实现的一个可拖动进度的圆形进度条。
移动端托拽进度条
lin_jiejie的博客
10-13 313
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>托拽进度条</title> <style> ul.lanren { margin: 100px auto; } ...
JQuery移动端播放进度条（可拖拽）
12-17
移动端视频进度条，可拖拽，可点击，附带时间转换，是移动端适配的所以记得用移动端界面查看；其中有带移动端适应布局，时间写死，需要使用的只需获取视频资源的时间即可。
C#拖拽进度条
11-22
C#拖拽进度条，通过MouseDown，MouseUp以及Scrolled方法进行结合，实现当鼠标按下后，拖动进度条到指定位置，弹起后进行处理，下载后可根据业务需求进行对代码调整，代码未做重构处理，只为实现功能，希望能帮到需要的朋友
Android编程基于自定义View实现绚丽的圆形进度条功能示例
08-31
首先，我们从标题和描述中了解到，我们要实现的是一个自定义的圆形进度条，它不仅能够展示进度，还可能有额外的交互特性，如拖动调整进度。 在Android中，创建自定义View通常需要继承自View或其子类，例如这里的`...
一个和应用层完全脱离的进度条控件，界面可组态
01-30
进度条控件通常用于显示任务执行的进度，让用户了解操作的当前状态，如文件下载、上传或大型计算等。在传统的进度条实现中，控件的更新通常直接与应用程序的业务逻辑紧密相关，这可能导致代码耦合度较高，不利于维护...
mars老师播放器源码
11-14
这个进度条不仅能够展示当前播放的位置，还允许用户直接通过拖动来改变播放进度，从而提高了用户体验。此外，一个特别引人注目的特性是实现了歌词与播放进度的同步，这意味着用户可以一边听歌，一边看到相应的歌词...
Android中文翻译组——Android中文API——android.widget合集（中）
04-23
9. ProgressBar：进度条，展示任务的进度，有水平、垂直、圆形等多种形式。 10. SeekBar：滑动条，用户可以通过拖动滑块来设置数值或选择范围。 11. GridView：网格视图，将数据以网格形式排列，常用于图片或小图标...
原生js实现的移动端可拖动进度条插件功能详解
10-16
主要介绍了原生js实现的移动端可拖动进度条插件功能,结合实例形式详细分析了javascript拖动进度条插件的具体定义与使用技巧,需要的朋友可以参考下
可以用手指拖动改变进度进度条
12-19
在android4.0下编译通过的。带滑块的进度条演示。可以用手指拖动改变进度。
C#多功能滑块(带进度条)
12-11
C#控件 比较灵活的一个滑块，滑块自带进度显示 颜色样式定义非常灵活
进度条以及拖动条的常用属性以及方法
yskhyy的博客
03-25 988
（事先声明，这只是小白学习路上的一个记录而已。有错误的地方请大牛们多指点。大神勿怪。） 1、Progress Bar（进度条-分为横线以及圆圈的两种，懂得自然懂哈哈） 例如上面这两个 android：max=“100”----进度条的最大值为100 android：progress=“0”----进度条的当前值为0,0的话也就是起始值 android：visibility=“visible”—进度...
可拖动的div(拖动音量调效果)
ucc的博客
07-27 1579
gif动图看不到鼠标。 --> 页面名称 *{margin:0} 水平坐标： 绿色盒子距离最左侧距离： 橙色盒子(背景)距离最左侧距离： 橙色盒子宽度： 绿色盒子宽度： 最大盒子宽度： 最大的盒子距离最左侧距离： 百分比： var oDiv1 = document.getElementB
js实现进度条的拖拽_☆*往事随風*☆的博客
☆往事随風☆的博客
06-14 3044
文章目录前言一、代码分析1.搭建一个进度条2.对进度条进行一定的样式修改3.对进度条应用js代码4.js整体代码5.运行结果总结 前言 利用js实现一个进度条拖拽的demo。 一、代码分析 1.搭建一个进度条 html代码如下（示例）： <!-- 外部容器 --> <div class="wrappers"> <!-- 包裹进度条 --> <div class="wrapper"> <
实现拖拽进度条
zhuchunyan_aijia的博客
08-23 3359
用到了拖拽功能 style> .wrap{ width:500px; border: 1px solid; padding: 20px; } .process{ position: relative; width:80%;
水平进度条 拖拽 效果
xiaowei的博客
12-10 3126
水平滚动条 拖拽 效果 bar.onmousedown+document.onmousemove <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0;
range——input新属性，可拖动的进度条
飞一样的编程
06-06 8550
也可以点击上下键微调
编程一首MP3，并用进度条显示播放进度
最新发布
06-08
以下是一个简单的Android MP3播放器的实现，同时使用Seekbar控件来显示播放进度。 在layout文件中添加一个SeekBar控件： ```xml <SeekBar android:id="@+id/seekBar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:max="100" android:progress="0" /> ``` 然后在Activity中实现MP3播放器的控制和进度条更新： ```java public class MainActivity extends AppCompatActivity implements MediaPlayer.OnCompletionListener { private MediaPlayer mediaPlayer; private SeekBar seekBar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mediaPlayer = MediaPlayer.create(this, R.raw.music); mediaPlayer.setOnCompletionListener(this); seekBar = findViewById(R.id.seekBar); seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() { @Override public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) { if (fromUser) { mediaPlayer.seekTo(progress * mediaPlayer.getDuration() / 100); } } @Override public void onStartTrackingTouch(SeekBar seekBar) { } @Override public void onStopTrackingTouch(SeekBar seekBar) { } }); } public void play(View view) { if (!mediaPlayer.isPlaying()) { mediaPlayer.start(); seekBar.setMax(mediaPlayer.getDuration()); new Thread(new Runnable() { @Override public void run() { while (mediaPlayer.isPlaying()) { try { Thread.sleep(1000); } catch (InterruptedException e) { e.printStackTrace(); } runOnUiThread(new Runnable() { @Override public void run() { seekBar.setProgress(mediaPlayer.getCurrentPosition()); } }); } } }).start(); } } public void pause(View view) { if (mediaPlayer.isPlaying()) { mediaPlayer.pause(); } } public void stop(View view) { if (mediaPlayer.isPlaying()) { mediaPlayer.stop(); mediaPlayer = MediaPlayer.create(this, R.raw.music); mediaPlayer.setOnCompletionListener(this); seekBar.setProgress(0); } } @Override public void onCompletion(MediaPlayer mp) { mediaPlayer = MediaPlayer.create(this, R.raw.music); mediaPlayer.setOnCompletionListener(this); seekBar.setProgress(0); } @Override protected void onDestroy() { super.onDestroy(); if (mediaPlayer != null) { mediaPlayer.release(); mediaPlayer = null; } } } ``` 在这个例子中，我们首先在onCreate()方法中创建MediaPlayer对象，并设置OnCompletionListener监听器，以便在播放完成时重新创建MediaPlayer对象。 然后在play()方法中调用MediaPlayer的start()方法开始播放MP3，并启动一个新的线程来更新SeekBar的进度条。在SeekBar的OnSeekBarChangeListener监听器中，我们实现了当用户拖动SeekBar时，MediaPlayer会跳到相应的位置。 在pause()方法中，我们调用MediaPlayer的pause()方法暂停播放，而在stop()方法中，我们调用MediaPlayer的stop()方法停止播放，并在播放完成时调用OnCompletionListener中的方法重新创建MediaPlayer对象。 最后，在onDestroy()方法中释放MediaPlayer对象的资源。 需要注意的是，在更新SeekBar的进度条时，我们需要使用runOnUiThread方法来更新UI线程中的SeekBar控件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值