在jQuery中悬停水平滚动菜单

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

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

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

---

唯一的问题是，光标将项目推得太远，而光标靠近末尾。

成功我已完成此悬停菜单

我修改了这个函数以考虑菜单项的宽度。它计算页面和菜单之间的比率，并根据光标的位置计算出要移动多少项

$('.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)');

});

剩下的就是集成Hammer.js touch库：）

//触发mousemove
$（'.menu'）.mousemove（函数（e）{
//查找所有菜单元素的宽度
var totalWidth=0；
$（this.find（'li'）。每个（函数（i）{
totalWidth+=parseInt（$（this）.outerWidth（），10）；
});
var l=（window.innerWidth-totalWidth）*e.pageX/（window.innerWidth-20）；//对正文边距/填充进行小幅度调整
$（this.find（'li'）.css（'transform'，'translateX（'+l+'px'））；
});
*{
填充：0；
保证金：0；
}
.集装箱{
宽度：100%；
溢出：隐藏；
}
.菜单{
宽度：1000%；
填充：20px0；
保证金：0；
}
李{
列表样式：无；
填充：0 50px；
显示：内联块；
过渡时间：100ms；
}


DOTA 2
风暴英雄
天际
侠盗猎车手5
光环4
魔兽世界
反击：开始

只需将
e.pageX
替换为
e.pageX/2
。或者甚至
e.pageX/3
，如果您愿意的话。如果你对编码很认真，你需要稍微温习一下你的数学。大多数情况下，编码和数学是密切相关的。而且，顺便说一句，如果你真的“制作”了那个函数，你应该知道如何调整它。伙计，你太棒了，谢谢你给你的问题提供了结果，我只想要这个东西，我搜索了很多，我真的很感谢你的努力，再次感谢你，伙计。。。