如何使用 Pixi.js 或 jquery UI 进行免费滚动?

我正在尝试使用自由滚动制作一个类似于 https://pharrellwilliams.com/的页面，该页面必须能够向左向下和向上导航，我不知道它是否是用画布完成

的我可以调查的是，它占用了图书馆 https://www.pixijs.com 也 https://jqueryui.com/

在jQuery IU的页面上是这个例子：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#draggable" ).draggable();
} );
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>

有了这段代码，我可以将div 移动到我想要的地方，但我想要的是动员起来，就像法瑞尔威廉姆斯的页面一样，我有一个平等的项目，我想学习

这里有一个可能对你有帮助的例子。它的强度远低于您提供的示例站点。如果这对您有用，您可以将其与您自己的项目集成。

.HTML

<div id="main">
<div class="part" style="background-color: rgba(255,0,0,0.25); top: 0; left:0;"></div>
<div class="part" style="background-color: rgba(0,0,255,0.25); top: 0; left: 1500px;"></div>
<div class="part" style="background-color: rgba(255,255,0,0.25); top: 900px; left: 0;"></div>
<div class="part" style="background-color: rgba(0,255,0,0.25); top: 900px; left: 1500px;"></div>
</div>

创建 4 个大型div 部分并专门将它们放置在 HTML 中的基本结构。我们可以将项目放入页面的负部分，但我们不能在任一方向上将负数滚动到 0，因此最好将它们从 0,0 开始放置。

.CSS

body {
margin: 0;
padding: 0;
overflow: hidden;
}
#main {
position: relative;
}
.part {
width: 1500px;
height: 900px;
position: absolute;
}

这有助于我们隐藏滚动条并设置其他常规样式。

JavaScript

$(function() {
function moveToCenter() {
var vert = $(document).height() - $(window).height();
var horz = $(document).width() - $(window).width();
console.log("Centering View:", Math.round(horz / 2), Math.round(vert / 2));
window.scrollTo(Math.round(horz / 2), Math.round(vert / 2));
}
function calcEdges(buff) {
var t = [0, buff];
var b = [$(window).height() - buff, $(window).height()];
var l = [0, buff];
var r = [$(window).width() - buff, $(window).width()];
return {
top: t,
left: l,
right: r,
bottom: b
};
}
function move(d, n) {
var c, g;
if (d == "top") {
c = $(window).scrollTop();
g = c + n;
if (g <= 0 || (g >= $(document).height())) {
console.log("Hit Top/Bottom Boundry");
return false;
}
$(window).scrollTop(g);
} else {
c = $(window).scrollLeft();
g = c + n;
if (g <= 0 || (g >= $(document).width())) {
console.log("Hit Left/Right Boundry");
return false;
}
$(window).scrollLeft(g)
}
}
function init() {
moveToCenter();
var sides = calcEdges(30);
$(window).mousemove(function(e) {
var x = e.clientX,
y = e.clientY;
if (x > sides.left[0] && x < sides.left[1]) {
console.log("Dir: Left", x);
move("left", -5);
} else if (x > sides.right[0] && x < sides.right[1]) {
console.log("Dir: Right", x);
move("left", 5);
}
if (y > sides.top[0] && y < sides.top[1]) {
console.log("Dir: Top", y);
move("top", -5);
} else if (y > sides.bottom[0] && y < sides.bottom[1]) {
console.log("Dir: Bottom", y);
move("top", 5);
}
});
}
init();
});

这里发生了相当多的事情。以下是基础知识：

将视口移动到内容中心的函数。这样，用户就可以滚动到的位置
一个函数，可帮助我们根据窗口边缘的特定像素数来计算"边缘"的位置
向特定方向(top或left)移动或滚动窗口的功能
一个初始化所有内容的函数，滚动到中心并设置我们的mousemove回调事件

工作示例代码：https://jsfiddle.net/Twisty/z8vh6kwx/

工作实例展示：https://jsfiddle.net/Twisty/z8vh6kwx/show

我已经配置了我的示例，当用户将鼠标从屏幕边缘移动 30 像素时，它会向该方向滚动 5 像素。它有点笨拙，但你可以看到它总体上确实有效。您可以有许多不同大小的部分并浮动在页面的不同部分。您可以添加其他悬停样式和点击事件。它不必比这更复杂。

希望对您有所帮助。

相关内容

最新更新

热门标签：