JQuery特效，拖动窗口，层

最新推荐文章于 2021-06-16 19:09:22 发布

LMAOhuaNL

最新推荐文章于 2021-06-16 19:09:22 发布

阅读量2.6k

点赞数

分类专栏： JQuery 文章标签： jquery stylesheet xhtml javascript div border

本文链接：https://blog.csdn.net/LMAOhuaNL/article/details/6727360

版权

JQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

以下的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">
<head>
    <title></title>
    <style type="text/css">
        *{ margin:0px; padding:0px;}
        body{ font-size:12px;}
        #div_content{ width:400px; margin:100px; height:130px; border:1px solid red;}
        #div_content h3{ line-height:23px; background:#000; color:#FFF;}
    </style>
    <!--uiplus/themes/ui-lightness导入这个路径下的样式文件-->
    <link href="../JQuery/uiplus/themes/ui-lightness/jquery.ui.all.css" rel="stylesheet"
        type="text/css" />
    <!--导入jquery-1.6.2.min.js--> 
    <script src="../JQuery/jquery-1.6.2.min.js" type="text/javascript"></script>
    <!--以下导入的jquery代码库均是 http://jqueryui.com/download 这里下载的，导入的顺序绝对不能变的--> 
    <script src="../JQuery/uiplus/ui/minified/jquery.ui.core.min.js" type="text/javascript"></script>
    <script src="../JQuery/uiplus/ui/minified/jquery.ui.widget.min.js" type="text/javascript"></script>
    <script src="../JQuery/uiplus/ui/jquery.ui.mouse.js" type="text/javascript"></script>
    <script src="../JQuery/uiplus/ui/jquery.ui.draggable.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        $(function () {
            $("#div_content").draggable({
                handle:"h3"   //当拖动h3的时候整个层才会动的
            });
        });
    </script>
</head>
<body>
    <div id="div_content">
        <h3>用户登录</h3>
        <div>我是内容层，你只有拖动标题我才会动的哦</div>
    </div>
</body>
</html>

效果预览如下（外观可以根据css自己处理）：