javascript - 如何制作圆形页面?(当滚动到页面内容的末尾时,页面将内容的开头添加到底部等等)
问题描述
我目前正在制作一个作品集,其中我有使用循环讲故事的漫画书——这意味着故事总是在重复。它结束的地方从新开始。我知道垂直滚动是如何工作的,但现在我希望让页面无限滚动,因为你可以一遍又一遍地阅读漫画。理想情况下,这将无缝工作(不会在页面内跳过)。
有人可以指出我如何使用 HTML 和 CSS 实现这一点的正确方向,或者如果需要也可以使用 javascript?
非常感谢。
解决方案
这实际上是我一直在寻找的东西:
http://jsfiddle.net/howderek/N9PWn
谢谢你玛拉
window.verticalScroller = function($elem) {
var top = parseInt($elem.css("top"));
var temp = -1 * $('#verticalScroller > div').height();
if(top < temp) {
top = $('#verticalScroller').height()
$elem.css("top", top);
}
$elem.animate({ top: (parseInt(top)-60) }, 600, 'linear', function () {
window.verticalScroller($(this))
});}
$(document).ready(function() {
var i = 0;
$("#verticalScroller > div").each(function () {
$(this).css("top", i);
i += 60;
window.verticalScroller($(this));
});});
推荐阅读
- laravel - Laravel 6 pathinfo() 期望参数 1 是字符串,给定对象
- ckeditor - CKEditor 5 - 允许特定属性
- javascript - 如何连接javascript数组
- django - 表格无效
- javascript - 我需要在我的网页中为电梯图像设置动画并将其移动到视图中的预设位置
- javascript - JavaScript 数组 - 删除重复项并只返回一个
- python - 删除相关定义线周围的线
- java - 如何使用变量访问 getStringArray
- azure-data-factory - 用于 AML 的数据集转换的最佳实践
- ssl - Gatling:WebSocketHandshakeException:无效的握手响应 getStatus:400 错误请求