jquery 弹窗拖动效果

来源：互联网发布：电脑怎么建立网络共享编辑：程序博客网时间：2024/06/08 18:18

可以把代码复制过去测试记得更换本地的jquery 库哦

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>drag</title>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>

    <script>
        $(document).ready(function() {
            //alert(111);
            $('#btn a').click(function() {
                // alert(222);
                $('#box').show();
            });
            $('span').click(function() {
                // alert(333);
                $('#box').hide();
            });

            $('#hd').mousedown(function(event) {
                // alert(444);
                var isMove = true;
                var abs_x = event.pageX - $('div#box').offset().left;
                var abs_y = event.pageY - $('div#box').offset().top;
                // alert(abs_x);
                // alert(event.pageX);
                $(document).mousemove(function(event) {
                    // alert(555);
                    if (isMove) {
                        var obj = $('div#box');
                        // alert(obj);
                        obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y});
                    };
                }).mouseup(function(event) {
                    isMove = false;
                });;
            });
        });
    </script>

    <style type="text/css">
        *{margin: 0;padding: 0;}
        #box{border: 5px solid #2e2e2e;width:320px;height: 240px;background-color: #CC9900;
            -moz-border-radius: 15px;      /* Gecko browsers */
            -webkit-border-radius: 15px;   /* Webkit browsers */
               border-radius:15px;            /* W3C syntax */
              /* display: none;*/
               margin-left: 30px;
               margin-top: 20px;
               position: absolute;
           }
        #hd{background-color: #666666;font-size: 14px;padding: 4px;cursor: move;}
        span{float: right;padding-right: 4px;cursor: pointer;}
        #cnt{padding: 5px;}
    </style>
</head>
<body>
    <div id="btn">
        <a href="#">点我弹框</a>
    </div>
    <div id="box">
        <div id="hd">
            <span>关闭</span><h3>这里是标题</h3>
        </div>
        <div id="cnt">
            这里是一些文字
        </div>
    </div>
</body>
</html>

1 0