码迷,mamicode.com
首页 > 移动开发 > 详细

07.30《jQuery》——2.1div框的移动

时间:2018-07-31 01:33:28      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:src   code   目的   img   div   pre   bbb   ted   alice   

目的:通过按钮实现div框的移动

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #bbb{
                height: 300px;
                width: 300px;
                background-color: aliceblue;
                position: relative;
            }
        </style>
        <script src="../jquery-3.2.1/jquery-3.2.1.js"></script>
        <script type="text/javascript">
            $(function() {
                $("#left").click(function() {
                    $("div:not(:animated)").animate({
                        left: "-=100"
                    }, 500);
                });
                $("#right").click(function() {
                    $("div:not(:animated)").animate({
                        right: "-=100"
                    }, 500);
                });
                $("#up").click(function() {
                    $("div:not(:animated)").animate({
                        top: "-=100"
                    }, 500);
                });
                $("#down").click(function() {
                    $("div:not(:animated)").animate({
                        bottom: "-=100"
                    }, 500);
                });
            })
        </script>
    </head>

    <body>
        <button id="left">left</button>
        <button id="right">right</button>
        <button id="up">up</button>
        <button id="down">down</button>
        <div id="bbb"></div>
    </body>

</html>

结果:只有静态的截图,但是功能以实现

技术分享图片

 

07.30《jQuery》——2.1div框的移动

标签:src   code   目的   img   div   pre   bbb   ted   alice   

原文地址:https://www.cnblogs.com/justlive-tears/p/9393680.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!