具有水平滚动和悬停运动的无限马赛克画廊

时间:2021-01-31 19:49:22

标签: javascript jquery css canvas gallery

我尝试构建类似 this gallery 但具有无限水平滚动效果的东西。我找不到任何以这种方式工作的 JS 脚本(库脚本),所以我需要从头开始构建它。也许有一些无限的画布脚本/库可以做到这一点?

此时我有一个基于鼠标药水的水平滚动,但它必须是无限的,而且我也试图使其可拖动,因为移动屏幕。在手机上,我想让它们可拖动/向左/向右滑动。

这是我目前的代码:https://jsfiddle.net/j3u5h6gp

这是让它在这一刻滚动的 JS:

jQuery(function($) {

  $(window).load(function() {

    var $gal = $("#propertyThumbnails"),
      galW = $gal.outerWidth(true),
      galSW = $gal[0].scrollWidth,
      wDiff = (galSW / galW) - 1, // widths difference ratio
      mPadd = 60, // Mousemove Padding
      damp = 350, // Mousemove response softness
      mX = 0, // Real mouse position
      mX2 = 0, // Modified mouse position
      posX = 0,
      mmAA = galW - (mPadd * 2), // The mousemove available area
      mmAAr = (galW / mmAA); // get available mousemove fidderence ratio

    $gal.mousemove(function(e) {
      mX = e.pageX - $(this).offset().left;
      mX2 = Math.min(Math.max(0, mX - mPadd), mmAA) * mmAAr;
    });

    setInterval(function() {
      posX += (mX2 - posX) / damp; // zeno's paradox equation "catching delay"  
      $gal.scrollLeft(posX * wDiff);
    }, 10);

  });
}); 

而且是否可以仅使用 jQuery 实现 this effect?使图像看起来像图层并以不同的速度相互移动?

0 个答案:

没有答案
相关问题