Question

我正在创建一个下拉菜单，其中的项目列表在屏幕上水平显示。将鼠标移到项目上会将外部项目滚动到视图中。

我创建了一个简单的jQuery函数，用于更新列表中元素的位置。

$('.menu').mousemove(function(e){
    $(this).find('li').css('transform','translateX(-'+ e.pageX + 'px)');
});

https://jsfiddle.net/jLmufy4h/

唯一的问题是光标将项目推得太远，光标接近结尾。

Answer 1

成功！我已完成此悬停菜单。

我已修改此功能以考虑菜单项的宽度。它计算页面和菜单之间的比率，并根据光标的位置计算移动项目的数量。

$('.menu').mousemove(function(e){

    // Find the width of all menu elements
    var totalWidth = 0;
    $(this).find('li').each(function(i) {
        totalWidth += parseInt( $(this).outerWidth(), 10 );
    });

    // Find the cursor ratio and position the menu
    var l = (window.innerWidth - totalWidth) * e.pageX / (window.innerWidth-20);
    $(this).find('li').css('transform','translateX('+ l + 'px)');

});

https://jsfiddle.net/jLmufy4h/2/

唯一剩下的就是集成Hammer.js触摸库：）

// Trigger mousemove
$('.menu').mousemove(function(e) {

  // Find the width of all menu elements
  var totalWidth = 0;
  $(this).find('li').each(function(i) {
    totalWidth += parseInt($(this).outerWidth(), 10);
  });

  var l = (window.innerWidth - totalWidth) * e.pageX / (window.innerWidth - 20); // Small adjustment for body margin / padding

  $(this).find('li').css('transform', 'translateX(' + l + 'px)');

});

* {
  padding: 0;
  margin: 0;
}

.container {
  width: 100%;
  overflow: hidden;
}

.menu {
  width: 1000%;
  padding: 20px 0;
  margin: 0;
}

li {
  list-style: none;
  padding: 0 50px;
  display: inline-block;
  transition: 100ms;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">

  <ul class="menu">
    <li>DOTA 2</li>
    <li>Heros Of The Storm</li>
    <li>SKYRIM</li>
    <li>Grand Theft Auto 5</li>
    <li>Halo 4</li>
    <li>World of Warcraft</li>
    <li>Counter-Strike: Go</li>
  </ul>
</div>

在jQuery中悬停水平滚动菜单

1 个答案: