getpro

个人备份用，不保证一定正确
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
简单jQuery效果

HTML

<html>
<head>
<title></title>
<script type="text/javascript" src="/Scripts/jquery-1.5.1.min.js"></script>
<script type="text/javascript"> 
var start_flag=0;
$(document).ready(function(){
  $("#start").click(function(){
if(start_flag==0)
{
  $("#box").animate({height:10},"slow");
  $("#box").animate({width:10},"slow");
  start_flag=1;
}
else
{
  $("#box").animate({width:200},"slow");
  $("#box").animate({height:300},"slow");
  start_flag=0;
}
  });
});

$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});

</script> 
<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
 
<body>

<div class="panel">
<p>jQuery slideToggle效果</p>
<p>jQuery slideToggle效果演示</p>
</div>

<p class="flip">猛击这里</p>

<p><a href="#" id="start">猛击这里</a></p>

<div id="box"
style="background:#98bf21;height:300px;width:200px;position:relative">
</div>
 
</body>
</html>

 

^_^



posted on 2011-12-30 06:31  getpro  阅读(299)  评论(0)    收藏  举报