如何建立像tumblr这样的过渡主页?

时间:2012-01-30 17:05:16

标签: javascript jquery ajax tumblr

我想建立一个与tumblr主页类似的网站。在那个页面上,当我们点击“30 reason”链接时,它会加载一个新页面,据我所知,它仍然在同一页面上。 (如果它不是同一页面,请纠正它。) 首先,我想问一下,tumblr为实现这一目标做了哪些技术?我的意思是使用jquery,javascript或ajax?是否有可供我们使用的图书馆?

其次,在转换到下页时,它是逐个加载数据还是一次加载所有数据?

非常感谢答案。 感谢。

2 个答案:

答案 0 :(得分:1)

嗯,使用jQuery很容易实现效果。

查看scrollTop()以类似方式处理页面动画...

$('body').animate({scrollTop: $('#lower_content').offset().top + 'px'}, 1000);

...假设您有一个ID为“lower_content”的元素,这自然取决于您网站的整体布局。在没有至少知道你对你正在做的事情有所了解的情况下去这里有点太多了。

至于加载东西 - 绝对只加载你需要的东西。加载“所有数据一次”有点含糊不清,但绝对听起来不错。查看jquery的$ .ajax()。对于函数的总运行而言,再次过于复杂。但对于刚刚进入jquery的有能力的程序员来说,这些技巧应该可以让你开始。

答案 1 :(得分:0)

使用margin-top css样式完成。最初他们将margin-top设置为0px。在点击“30个原因”时,该值设置为负数。这会有点生涩。他们使用新的转换css属性(对于基于webkit的浏览器)平滑了转换。作为旧浏览器(和IE9)的后备,可以使用jQuery或类似的框架。