页面滑动效果

wanghao111 2012-08-03 02:12:34

这个网站http://bleacherreport.com/articles/1279323-power-ranking-every-nfl-offense-heading-into-the-2012-season上的滑动效果，在右边的“NFL Team StreamTM”中点选article，整个左边内容都会滑动切换，而且地址栏中的地址也会换成相应的地址，有知道这是怎么实现的或者有这方面资料的吗？谢谢！分不够再加

...全文

213 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

zpfnfsa1 2012-08-08

打赏
举报

这个效果很好

franzhong 2012-08-03

打赏
举报





<!doctype html>

<meta charset=utf-8>

<html>  

 <head>  

  <title>Demo</title>  

  </head>  

 <body>  

<style>

.main_wrapper{width:500px;height:250px;margin:0 auto;}

#main{width:500px;height:200px;border:1px solid red;}

</style>



<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>



<div class="main_wrapper">

<div id="main"></div>

<input id="testBtnLeft" type="button" value="<<Left" />

<input id="testBtnRight" type="button" value="Right>>" />

</div>



<script>

/*

*数据来源可能过ajax异步获取

*

*/

var id = 8;

$("#testBtnLeft").click(function(){

	window.location.href="#?id="+(--id);

	$("#main").empty().html("LEFT::::::this is a test "+id);

	

});



$("#testBtnRight").click(function(){

	window.location.href="#?id="+(++id);

	$("#main").empty().html("RIGHT::::::data data data data data data "+id);

});



</script>  

</body>  

</html>