<!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>
