前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jqueryUI 设置数值的滑动条

jqueryUI 设置数值的滑动条

作者头像
Devops海洋的渔夫
发布2019-05-31 10:37:09
1.3K0
发布2019-05-31 10:37:09
举报
文章被收录于专栏:Devops专栏

实现基本的HTML+CSS

查看拖拽的偏移量

可以从这个方法中获取到了小红块的拖动偏移量left,那么只要通过这个left进行计算,将计算的值赋值给右边的数字之中。

根据偏移量计算 0 - 100 的进度值

给拖动的小红块前面加个伸缩的进度条

随着前面的小红块拖拉,后面也会伸缩填充前面的进度。

完整代码

代码语言:javascript
复制
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
    <style type="text/css">
        *{margin:0;padding: 0;font-size: 0;}

        .wrap{
            height: 20px;
            width: 530px;
            margin:50px auto;

        }

        .outside_line{
            width: 500px;
            height: 20px;
            border:2px solid #ccc;
            display: inline-block;
        }

        .outside_line .drap_box{
            width: 20px;
            height: 20px;
            background: pink;
            float: left;            
        }
    
        .outside_line .drag_after{
            /*width: 50px;*/
            width: 0;
            height: 20px;
            background-color: pink;
            float: left;
            position: absolute;
        }

        .nums{
            width: 20px;
            height: 20px;
            border: 2px solid #ccc;
            float: right;
        }

        .nums em{
            display: block;
            width: 100%;
            height: 100%;
            font-style: normal;
            text-align: center;
            color: lightblue;
            font-size: 14px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
    <script type="text/javascript">
        $(function(){
            // alert( $('.nums em').html() );

            $('.drap_box').draggable({
                containment: "parent", // 限制在父级元素下拖动
                opacity: 0.6,  // 设置拖动的时候,透明度设置为0.6

                drag:function(ev,ui){
                    console.log(ui.position.left);
                    // console.log(parseInt((ui.position.left/480)*100));

                    $('.nums em').html( parseInt((ui.position.left/480)*100) );
                    
                    $(".drag_after").css({"width":ui.position.left});
                }
            })
        })
    </script>
</head>
<body>
    <div class="wrap">
        <div class="outside_line">
            <div class="drag_after"></div>
            <div class="drap_box"></div>
        </div>
        <div class="nums"><em>0</em></div>
    </div>

</body>
</html>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.05.12 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 实现基本的HTML+CSS
  • 查看拖拽的偏移量
  • 根据偏移量计算 0 - 100 的进度值
  • 给拖动的小红块前面加个伸缩的进度条
  • 完整代码
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档