Ajax动态的显示和退出div

前端之家收集整理的这篇文章主要介绍了Ajax动态的显示和退出div前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

html:

  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. <!--css改变div -->
  13. <div id="win">我的窗口<span id="close" onclick ="hide()">X</span></div>
  14.  
  15. </body>
  16. </html>


js:

  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:


  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. }

猜你在找的Ajax相关文章