jQuery的卷帘效果

一个简单的jQuery实现的卷帘效果,用的时候可以在相应的div中添加代码


<html>
<head>
 <script language="javascript" src="jquery-1.3.2.js"></script>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JQuery测试</title>

    <style type="text/css">
		div {   margin:3px; width:40px; height:40px;
				position:absolute; left:0px; top:30px; 
				background:green; display:none; }
	  div.newcolor { background:blue; }
	  span { color:red; }       
    </style>
    
	
<script language = "JavaScript" type="text/javascript">
      $(document.body).click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},2000);
      $("div").queue(function () {
          $(this).addClass("newcolor");
          $(this).dequeue();
      });
      $("div").animate({left:'-=200'},500);
      $("div").queue(function () {
          $(this).removeClass("newcolor");
          $(this).dequeue();
      });
      $("div").slideUp();
});
</script>
</head>
<body>

  Click here...
  <div>
 	 <table  bgcolor="#7F3F00">
	 	<tr>2</tr>
		<tr>3</tr>
		<tr>4</tr>
	 </table>
  </div>

</body>

</html>

你可能感兴趣的:(jquery)