Question

我正在尝试使用像这个网站k2.pl

这样的横向滚动来构建一个网站

说明

到目前为止，我已将此代码设为jquery animate并滚动到

// i am getting y and x axis and moving the whole page agains it
$('.scroll').animate( { scrollLeft: '+='+newScroll }

但我所做的是我的脚本获取网站的X轴并移动它但我想要的是，当我将鼠标悬停在网站上的元素时，它应该滚动到中心，就像在这个网站上一样k2.pl < / p>

你们可以给我一些jquery插件，或者告诉我如何改进它

Answer 1

如果你检查网站并移动鼠标，你会看到你悬停的元素并没有真正到达中心，滚动的移动与水平移动相关联。鼠标，与悬停在不同的列表元素上无关。

这个想法很简单：

拥有一个容器，该容器占据窗口的整个宽度，并且具有overflow:hidden。
在该容器内部有第二个容器，其宽度与元素列表相同。
在该容器内部有一个元素列表（或一系列内联元素），占据的窗口宽度超过窗口宽度。
当鼠标在容器上移动时，计算鼠标在窗口内的位置，并相应地水平滚动容器。

它的基本版本是这样的：

＆＃13;

$(document).ready(function() {
  
  $(".scroll").on("mousemove", function(e) {
    
    var ww = $(window).width();       // window width
    var uw = $(".scroll ul").width(); // ul width
    var mp = e.clientX;               // mouse position
    var ms = uw - ww;                 // max scroll
    var sc = - ms * mp / ww;          // amount to be scrolled

    $(".scroll > div").stop().animate({ left: sc +"px" }, 600, "easeOutCirc");
    
  });
  
});

＆＃13;

html, body { 
  margin:0;
  padding:0;
  border:0;
}

div.scroll {
  width:100%;
  height:400px;
  overflow:hidden;
  background:#f0f0f0;
  position:relative;
}

div.scroll > div {
  width:1400px;
  position:absolute;
  top:0;
  left:0;
}

div.scroll > div > ul {
  width:1400px;
  margin:0;
  padding:0;
}

div.scroll > div > ul > li {
  display:inline-block;
  float:left;
  width:200px;
  height:400px;
  opacity:0.7;
  transition:all 0.5s;
}

div.scroll > div > ul > li:hover {
  opacity:1;
  background:#6699cc;
}

div.scroll > div > ul > li:hover > span {
  color:white;
  background:black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>

<div class="scroll">
  <div>
    <ul>
      <li><span>AAA</span></li>
      <li><span>BBB</span></li>
      <li><span>CCC</span></li>
      <li><span>DDD</span></li>
      <li><span>EEE</span></li>
      <li><span>FFF</span></li>
      <li><span>GGG</span></li>
    </ul>
  </div>
</div>

＆＃13;

（注意：如果窗口宽度大于1400px，上面的代码可能无效）

如果你检查k2.pl的源代码，你会发现他们正在使用jQuery，jQuery UI和Ariel Flesler's scrollTo plugin。你可以在script.min.js文件中找到控制滚动的代码（与我上面解释的不同）（搜索mousemove.sapp）。

Answer 2

正如所承诺的，这是我的工作解决方案。 Alvaro很棒，但是它使用了jQuery animate函数，这是一个很大的禁忌（例如，它比CSS转换/ GSAP JavaScript动画库慢大约10倍），所以我以为你可能会受益于另一个实现。

我个人喜欢GSAP，这非常容易上手;这就是我在这里使用它的原因。剩下的就是本机JS，所以你不需要所有的库膨胀：

＆＃13;

var wrapper = document.getElementById("wrapper");
var tiles = document.getElementsByClassName("tile");
var tileWidth = tiles[0].getBoundingClientRect().width;
var containingWidth = tileWidth * tiles.length;

wrapper.addEventListener("mousemove", function(e){
  var pos = (e.clientX / (wrapper.getBoundingClientRect().width)) * containingWidth - (tileWidth / 1.5);
  TweenLite.to(wrapper, 1, { scrollLeft: pos, ease: Circ.easeOut })
});

＆＃13;

html, body {
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
}

#wrapper {
  height: 100%;
  overflow-y: hidden;
  overflow-x: auto;
}

.tile {
  display: inline-block;
  height: 100%;
  width: 400px;
  transition: background 0.2s ease-in-out;
}

.tile:hover {
  background: transparent !important;
}

＆＃13;

<div id="wrapper">
  <div style="background: #6d8745" class="tile"></div>
  <div style="background: #aa715a" class="tile"></div>
  <div style="background: #a25fe3" class="tile"></div>
  <div style="background: #8e84f5" class="tile"></div>
  <div style="background: #259a5c" class="tile"></div>
  <div style="background: #d5b67a" class="tile"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>

＆＃13;

这些原则与阿尔瓦罗的原则基本相同。你必须要了解的是，视口的宽度将是包含所有＆＃34; tile＆＃34;的div /元素宽度的一定百分比。因此，考虑到这一点，您必须计算如何使它们以1：1的比例进行映射。该计算由这行代码表示（末尾的减法是偏移量）：

var pos = (e.clientX / (wrapper.getBoundingClientRect().width)) * containingWidth - (tileWidth / 1.5);

希望这有帮助！

Original codepen

光滑的水平滚动，如k2.pl

2 个答案: