jquery UI 拖动滑动条

de20050138

于 2020-07-31 14:37:34 发布

阅读量356

点赞数

文章标签： html jquery jqueryui

本文链接：https://blog.csdn.net/de20050138/article/details/107712886

版权

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <!-- 导入jquery的ui -->
    <script src="../js/jquery-ui.min.js"></script>
    <Script>
        $(function name(params) {
            $(".dragbar").draggable({
                //限制只能x轴移动
                axis: "x",
                // 只能容器com里面拖动  限制只能在父级里面拖动
                containment: "parent",
                //设置拖动时 拖动的东西透明
                opacity:0.8,
                //拖拽开始时触发 start 事件，拖拽期间触发 drag 事件，拖拽停止时触发 stop 事件。
                drag:function (ev,ui) {
                    
                    console.log(ui)
                    //x轴距离 左边的距离 {"position": {left: 2},"position":{top: 0}}
                    // document.title=ui.position.left;
                    var nowleft = ui.position.left

                    //显示滑块上面的数值
                    $(".slide_count1").show()
                    //拖动时显示的数值  除以滑动长度600-滑块30
                    $(".slide_count").val(parseInt(100*nowleft/570)+"%")
                    $(".slide_count1").val(parseInt(100*nowleft/570)+"%")
                    //拖动时经过的路径
                    $(".slidebar .porgress").css({"width": nowleft +30})
                    拖动时滑块上面显示的数值的文本位置
                    $(".slide_count1").css({"left": nowleft +3})
                    //拖动时滑块变成 绿色
                    $(".dragbar").css({ "background": "green"})
                    //点击滑块y轴还是会移动  固定top为0 
                    ui.position.top=0
                },
                stop:function(){
                    //还原滑块颜色
                    $(".dragbar").css({ "background": "gold" })
                    //500ms后 隐藏滑块上面的数值
                    window.setTimeout("$('.slide_count1').hide()",500)
               
                }
            })


         })
    
        
    
    </Script>
    <style>
       .slidebar_con {
            width: 660px;
            height: 32px;
            margin: 50px auto 0;
            /* border: 1px solid black; */
        }

        /* 滑动的长框 */
        .slidebar{
            width: 600px;
            height: 30px;
            border: 1px solid red;
            /* 靠左悬浮 */
            float:left;
            /* 相对固定 元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移 */
			position:relative;
            /* 设置半圆 */
            border-radius:30px
            
        }
        


        /* 滑块 */
        .slidebar .dragbar{
            width: 30px;
            height: 30px;
            background: gold;
            /* 生成绝对定位元素，元素脱离文档流，不占据文档流的位置 */
            position: absolute;
            left: 0;
            top: 0;
            border-radius:30px
            
        }

        /* 滑动经过的地方 */
        .slidebar .porgress{
            width: 0px;
            height: 30px;
            background:#f0f0f0;
            position:absolute;
			left:0;
			top:0;
            border-radius:30px
            
        }

        /* 显示百分比 */
        .slide_count{
            /* 间距 */
            padding:0;
            /* 靠右边悬浮 */
			float:right;
			width:50px;
			height:30px;
			border:1px solid red;
			text-align:center;
			font-size:16px;
            /* 设置圆角 */
            border-radius:30px;
            /* 清除背景色的灰色 */
            background: none;
        }
        

        /* 显示百分比 */
        .slide_count1{
            /* 间距 */
            width: 40px;
            height: 10px;
            padding:0;
            position: absolute;
            top: -15px;
            left: 10px;
            background: none;
            border: none;
            
            
        }

    </style>
</head>

<body>
    <div class="slidebar_con">
        <div class="slidebar">
            <div class="porgress"></div>
            <div class="dragbar"></div>
            <input type="text" class="slide_count1" value="" disabled="disabled">
        </div>
        <!-- disabled="disabled" 禁止输入和获取焦点  背景色会变为灰色 -->
        <input type="text"  class="slide_count" value="0" disabled="disabled">
        

    </div>
</body>

</html>

效果述

de20050138

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery UI 拖动滑动条

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/jquery-1.12.4.min
复制链接

扫一扫

jquery UI 拖动 滑动条

jquery UI 拖动滑动条