Css实现拖动效果

最新推荐文章于 2024-06-09 23:08:20 发布

weixin_34122548

最新推荐文章于 2024-06-09 23:08:20 发布

阅读量1.2k

点赞数

文章标签： javascript ui xhtml ViewUI

原文链接：http://www.cnblogs.com/lunawzh/p/4497978.html

版权

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

代码如下，需要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 {
            width: 1110px;
            margin: 200px auto;
        }
         .box {
             width: 800px;
             height: 40px;
             border: 1px solid #696969;
             position: relative;
         }
        .movebox {
            width: 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>

转载于:https://www.cnblogs.com/lunawzh/p/4497978.html

weixin_34122548

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Css实现拖动效果

效果如下，可以拖动滑块，数字显示的是离左侧距离：代码如下，需要jquery和jquery-ui库，请从官网上下载<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text...
复制链接

扫一扫