Ajax动态的显示和退出div

最新推荐文章于 2022-09-05 17:47:44 发布

渴望飞的鱼

最新推荐文章于 2022-09-05 17:47:44 发布

阅读量472

点赞数

分类专栏：前端网页设计文章标签： Ajax CSS 前端

前端网页设计专栏收录该内容

41 篇文章 1 订阅

订阅专栏

html:

[html]view plain copy 
   
 <!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:

[java]view plain copy 
   
 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:

[html]view plain copy 
   
 /*#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;  
 }  