显示,隐藏div

来源:互联网 发布:d3.js 弧线 编辑:程序博客网 时间:2024/05/11 14:05
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

  <head>
 <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-1.7.2.js"></script>
 

  </head>
 
  <body>
      <h3 align="center">点击跳到登录窗口</h3>
      <h4>登录&nbsp;&nbsp;&nbsp;<a  href="#" onclick="showwin()" style="color:red">点击登录</a></h4>
 
      <div id="win">
      <div id="title" style="color:#3300FF;font-size:20px">用户登录&nbsp;&nbsp;&nbsp;<span id="close" onclick="hide()"><img src="${pageContext.request.contextPath }/images/cha.png"/></span></div>
          <input type="text" name="username"/><br/>
          <input type="password" name="password"/><br/>
          <input type="submit" value="登录" onclick="hide()"/>
      </div>
  <script type="text/javascript">
//设置打印的
  function showwin(){  
      //方法3 利用jquery的fadeIn方法  
       var winNode = $("#win");  
      winNode.fadeIn("slow");//  block
      //document.getElementById("win").style.display="block";
      
  }  

  function hide(){  
         //1.查找窗口对应的div节点  
          var winNode = $("#win");  
          //方法3 利用jquery的fadeOut方法  
          winNode.fadeOut("slow");  
        //  document.getElementById("win").style.display="none";
            
      }
 
  </script>
 
  </body>
</html>