JS——jquery UI

時間 2019-11-12

原文原文鏈接

1. draggable()javascript

滑動條demo：css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .con{
            width:300px;
            height:300px;
            border:1px solid #000;
            margin:50px auto 0;
        }

        .box{
            width:50px;
            height:50px;
            background-color:hotpink;
            cursor:pointer;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //使得box能夠鼠標拖動
            $('.box').draggable({
                //約束元素在父級內拖動
                containment:'parent',
                //約束元素只能橫向拖動
                axis:'x',
                //元素拖動時透明度變爲0.6
                opacity:0.6,
                //ui裏面有什麼能夠用console.log（ui）查看
                drag:function (ev,ui) {
                    var nowleft = ui.position.left;
                }
            });
        })
    </script>
</head>
<body>
    <div class="con">
        <div class="box"></div>
    </div>
</body>
</html>

1. jQuery UI
2. jquery ui
3. Jquery UI
4. JQuery UI 入門
5. 學習jQuery UI
6. jQuery ui 框架
7. 學習 jQuery UI
8. jQuery UI(五)
9. jQuery筆記——UI
10. jquery-ui datepicker
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• jQuery Mobile 網格 - jQuery Mobile 教程
• 適用於PHP初學者的學習線路和建議
• RxJava操作符（六）Utility

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。