Ajax动态的显示和退出div

绝地灬酷狼 2022-05-31 01:18 413阅读 0赞

html:

**\[html\]**  [view plain][]  [copy][view plain]

1.  <!DOCTYPE html>  
2.  <html lang="en">  
3.  <head>  
4.      <meta charset="UTF-8">  
5.      <title>JQuery实例:浮动窗口</title>  
6.      <script type="text/javascript" src="jslib/jquerywin.js"></script>  
7.      <script type="text/javascript" src="jslib/jquery-3.1.1.js"></script>  
8.      <link href="css/win.css" rel="stylesheet" type="text/css">  
9.  </head>  
10. <body>  
11.     <a onclick="showWin()" href="\#">显示窗口</a>  
12.       
13.     <div id="win">我的窗口<span id="close" onclick ="hide()">X</span></div>  
14.   
15. </body>  
16. </html>

js:

**\[java\]**  [view plain][]  [copy][view plain]

1.  function showWin()\{  
2.      var winNode = $("\#win");  
3.  //通过jqurey修改css  
4.      //winNode.css("display","block");  
5.  //使用jquery的show方法  
6.      winNode.fadeIn("slow");//淡入淡出fadeOut  
7.  //winNode.show(4000);  
8.  \}  
9.  function hide()\{  
10.     var Node = $("\#win");  
11.     //Node.css("display","none");  
12.     Node.hide("slow");  
13.     //或者是fadeout淡出  
14. \}

css:

**\[html\]**  [view plain][]  [copy][view plain]

1.  /\*\#id id选择器\*/  
2.  \#win\{  
3.      border: \#ff1719 1px solid;  
4.      border-radius:10px;/\*控制高和宽\*/  
5.      width: auto;  
6.      height: auto;  
7.    
8.      position: absolute;  
9.      top: 200px;  
10.     left: 200px;  
11.   
12.     display: none;  
13. \}  
14. \#close\{  
15.     cursor:pointer;  
16. \}

[view plain]: http://blog.csdn.net/grit_icpc/article/details/53045191#