jquery可移动的弹窗 -

liu346435400

浏览: 27934 次
性别:
来自: 长沙

最近访客更多访客>>

stjauns

精致男孩

wzawz

hizhengfu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jquery可移动的弹窗

博客分类：

javascript

<!DOCTYPE html>
<html lang="zh">
    
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>
            Qing's Web
        </title>
        <script src="jquery-1.7.2.min.js" type="text/javascript">
        </script>
        <style type="text/css">
            .footer { position: fixed; bottom: 0; width: 100%; }
			.moveBar { position:absolute; width: 250px; height: 300px; background: #666; border: solid1px #000; }
			#banner { background: #52CCCC; cursor: move; }
        </style>
    </head>
    
    <body style="padding-top: 50px;">
        <div class="moveBar">
            <div id="banner">
                按住此处移动当前div
            </div>

            <div class="content">
                这里是其它内容
            </div>

        </div>

        <div class="footer">
            <p align="center" class="label">
                ALL Rights Reserved xxx 版权所有
            </p>
        </div>
        <script>
			$(function(){
				$("#banner").live("mousedown",function(event) {
                    var isMove = true;
                    var abs_x = event.pageX - $('div.moveBar').offset().left;
                    var abs_y = event.pageY - $('div.moveBar').offset().top;
                    $(document).mousemove(function(event) {
                        if (isMove) {
                            var obj = $('div.moveBar');
                            obj.css({
                                'left': event.pageX - abs_x,
                                'top': event.pageY - abs_y
                            });
                        }
                    }).mouseup(function() {
                        isMove = false;
                    });
                });
            });
        </script>
    </body>

</html>