页面滑动成效

2012-09-28

页面滑动效果这个网站http://bleacherreport.com/articles/1279323-power-ranking-every-nfl-offense-head

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

[解决办法]
AJAX做的
[解决办法]
应该用jquery的flip插件可以实现这种效果
[解决办法]
用IE的web developer或Firefox的firebug去debug下
[解决办法]

HTML code

<!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>
[解决办法]
这个效果很好

热点排行

JavaScript

页面滑动成效