jquery可移动的弹窗

最新推荐文章于 2023-02-23 16:22:18 发布

lgj346435400

最新推荐文章于 2023-02-23 16:22:18 发布

阅读量259

点赞数

分类专栏： javascript 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/lgj346435400/article/details/84701919

版权

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!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>

lgj346435400

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery可移动的弹窗

&lt;!DOCTYPE html&gt;&lt;html lang="zh"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html;charset=UTF-8"&gt; &lt;title&gt;
复制链接

扫一扫