【笔记】使用CSS3 transition写出简单的视频框效果 jqMobiMin 

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title> css3 滑动块效果 </title>
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
 .top{position:relative;width:500px;height:50px;top:-50px;background:#ccc;-webkit-transition:top 1s ease;}
 .bottom{position:relative;width:500px;height:50px;margin:-50px 0 0 0;top:300px;background:#000;-webkit-transition:top 1s ease;}
 .mokuai{position:absolute;margin:100px auto 0;width:500px;height:300px;background:#999;overflow:hidden;}

  </style>
 </head>
 <body>

 <div class='mokuai' id='mokuai'>
 <div class="top" id='top'></div>
 <div class='bottom' id='bottom'></div>
 </div>
 </body>
 <script src="js/jq_mobi_min.js" type="text/javascript"></script>
 <script type="text/javascript">
 <!--
 var con=0;
 var content=document.getElementById('mokuai');

 content.onclick=function(){
  if(con==0){
   $('#top').css({'top':'0px'});
   $('#bottom').css({'top':'250px'});
   con=1;
  }
  else{
   $('#top').css({'top':'-50px'});
   $('#bottom').css({'top':'300px'});
   con=0;
  }
 }
 //-->
 </script>
</html>

 

posted @ 2012-07-21 23:17  丛子  阅读(659)  评论(1)    收藏  举报