【笔记】使用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>

 

转载于:https://www.cnblogs.com/GeekHacker/archive/2012/07/21/2603319.html

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页