专栏首页Devops专栏jqueryUI 设置数值的滑动条

jqueryUI 设置数值的滑动条

实现基本的HTML+CSS

查看拖拽的偏移量

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

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

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

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

完整代码

<!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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS 定位布局 - 相对、绝对、固定三种定位

    文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据...

    Devops海洋的渔夫
  • 盒模型的实际尺寸

    好了,从上图来看,已经绘画除了三个正方形了。下面继续看看增加一下边框border看看。

    Devops海洋的渔夫
  • jquery样式操作

    选择器获取的多个元素,获取信息获取的是第一个,比如:$("div").css("width"),获取的是第一个div的width。

    Devops海洋的渔夫
  • 最全的CSS浏览器兼容整理

    CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就 会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对...

    botkenni
  • 响应式绿色环保网页

    王凡汎
  • 电商项目(上)

    :nth-last-child(n): 选择器匹配属于其元素的第n个子元素的每个元素

    达达前端
  • 前端课程——布局

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta...

    Dreamy.TZK
  • 美化ThinkPHP

    然后我们修改这里面的代码就行的。下面的模板是我自己项目修改用的。大家也可以用AJAX加载的。

    似水的流年
  • Day6:html和css

    达达前端
  • 美化ThinkPHP

    首先我们来看看Thinkphp的模板, 成功界面: ? 错误页面 ? 说到美化的话,我们需要先找到这个模板在那里 ThinkPHP/Tp...

    似水的流年

扫码关注云+社区

领取腾讯云代金券