zoukankan html css js c++ java

Css实现拖动效果

效果如下，可以拖动滑块，数字显示的是离左侧距离：

代码如下，需要jquery和jquery-ui库，请从官网上下载

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <style>
        *{ margin: 0;
            padding: 0;
        }
        body {
             1110px;
            margin: 200px auto;
        }
         .box {
              800px;
             height: 40px;
             border: 1px solid #696969;
             position: relative;
         }
        .movebox {
             100px;
            height: 50px;
            background: #ccc;
            cursor: pointer;
            box-shadow: 0px 5px 5px darkblue;
            position: absolute;
            top: -5px;
        }
    </style>
    <script>
        $(function() {
            $(".movebox").draggable({
                axis: "x",
                containment: "parent",
                drag: function(evnet, ui){
                $("h1").text(ui.position.left);
        }
            });
        });
    </script>
</head>
<body>
    <h1>0</h1>
    <div class="box">
        <div class="movebox"></div>
    </div>
</body>
</html>

查看全文

相关阅读:
luogu_1414 又是毕业季II
luogu_1372 又是毕业季I
luogu_1313 计算系数
 luogu_1134 阶乘问题
 luogu_1514 引水入城
 luogu_1120 小木棍
 文件操作
 快速排序
 c oth
ANSI C与C89、C99、C11区别差异

原文地址：https://www.cnblogs.com/lunawzh/p/4497978.html