模仿原生淘宝app点击搜索时的页面滑动效果 

<!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{
        width: 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;width: 100%">搜索</div>

<div id="scrollLeft">
<input type="button" id="retu" value="<<返回" style="width: 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>

　　

posted @ 2017-02-08 16:47  刘浩2561179983  阅读(326)  评论(0)  编辑  收藏  举报