<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
html,body{
height:100%;
}
*{margin: 0;padding: 0;box-sizing:border-box}
#scrollLeft{
100%;
height: 100%;
overflow: scroll;
background:white;
display: none;
z-index: 999;
top: 0;
position: fixed;
}
#scrollLeft div{
height: 200px;
border-bottom: 1px solid black;
background: yellow
}
#scrollLeft div:nth-child(2n){
background: green;
}
</style>
<script src="jquery1.42.min.js"></script>
</head>
<body>
<div id="search" style="height: 100px;text-align:center; line-height: 100px;font-size: 30px;border: 2px solid black;position: absolute;top: 0;left: 0; 100%">搜索</div>
<div id="scrollLeft">
<input type="button" id="retu" value="<<返回" style=" 100%;height: 100px;font-size: 50px;text-align: left; "><br>
<div>11111111111111111</div>
<div>22222222222222222</div>
<div>33333333333333333</div>
<div>44444444444444444</div>
<div>55555555555555555</div>
<div>66666666666666666</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<span></span>
</div>
<script type="text/javascript">
$('#search').click(function(){
var screenWidth=$(window).width();
$('#scrollLeft').css('left',screenWidth+"px").show().animate({'left':'0'},400);
$(this).animate({'left':'-200px'},400)
})
$("#retu").click(function(){
var screenWidth=$(window).width();
$('#scrollLeft').animate({'left':screenWidth+"px"},400);
$('#search').animate({'left':'0'},400);
})
</script>
</body>
</html>