Ajax动态的显示和退出div

最新推荐文章于 2021-08-05 13:02:05 发布

Grit_ICPC

最新推荐文章于 2021-08-05 13:02:05 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Ajax 文章标签： Ajax

本文链接：https://blog.youkuaiyun.com/Grit_ICPC/article/details/53045191

Ajax 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用JQuery实现的浮动窗口示例。通过HTML、CSS和JS代码结合，展示了如何创建并控制一个可以显示和隐藏的浮动窗口。该窗口能够通过链接触发显示，并可通过关闭按钮进行关闭。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery实例:浮动窗口</title>
    <script type="text/javascript" src="jslib/jquerywin.js"></script>
    <script type="text/javascript" src="jslib/jquery-3.1.1.js"></script>
    <link href="css/win.css" rel="stylesheet" type="text/css">
</head>
<body>
    <a onclick="showWin()" href="#">显示窗口</a>
    <!--css改变div -->
    <div id="win">我的窗口<span id="close" onclick ="hide()">X</span></div>

</body>
</html>

js:

function showWin(){
    var winNode = $("#win");
//通过jqurey修改css
    //winNode.css("display","block");
//使用jquery的show方法
    winNode.fadeIn("slow");//淡入淡出fadeOut
//winNode.show(4000);
}
function hide(){
    var Node = $("#win");
    //Node.css("display","none");
    Node.hide("slow");
    //或者是fadeout淡出
}

css:

/*#id id选择器*/
#win{
    border: #ff1719 1px solid;
    border-radius:10px;/*控制高和宽*/
    width: auto;
    height: auto;

    position: absolute;
    top: 200px;
    left: 200px;

    display: none;
}
#close{
    cursor:pointer;
}