页面滑动成效-JavaSript-爱易网页

页面滑动成效

日期：2014-05-16　浏览次数：20302 次

页面滑动效果
这个网站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>

------解决方案--------------------
这个效果很好

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

页面滑动成效

相关资料更多>

推荐阅读更多>