Py学习  »  Jquery

如何用Pix.js或jQuery UI进行自由滚动?

Daniel Abrego • 4 年前 • 655 次点击  

我想做一个类似于 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移到我想要的地方,但是我想要的是像pharrell williams页面中那样进行动员,我有一个平等的项目,我想学习

Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/52486
 
655 次点击  
文章 [ 1 ]  |  最新文章 4 年前
Twisty
Reply   •   1 楼
Twisty    4 年前

下面是一个可能对你有帮助的例子。它远没有你提供的示例站点那么密集。如果这对你有用,你可以把它集成到你自己的项目中。

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像素。这有点笨拙,但你可以看到它的整体工作。你可以有许多不同大小的部分,浮动在页面的不同部分。可以添加其他悬停样式并单击事件。不必比这更复杂。

希望有帮助。