以与鼠标移动相反的方向移动导航项答案

【问题标题】：move navigation items in opposite direction to mouse move以与鼠标移动相反的方向移动导航项
【发布时间】：2017-05-20 02:29:01
【问题描述】：

我有一个带有列表项（菜单项）列表的导航栏。我想滚动与鼠标移动相反的菜单项，即如果我在菜单项上向左移动鼠标，则项目应该向右平滑移动，反之亦然。我是否需要用鼠标事件编写算法，或者这可以通过转换来完成，请告诉我。

我正在尝试复制此页面上的导航功能https://www.bd.dk/produkter/kloak/broendgods/kuppelriste/oe315/222723000/city-kuppelrist-for-315mm-kegle

PFA 导航栏

Navigation bar

【问题讨论】：

您需要更加具体。什么是“鼠标移动” - 你的意思是如果你将鼠标悬停在链接或某个元素上，或者你只是将鼠标移动到页面上的任何位置？以及您到底想移动什么以及如何移动（例如它应该移动多少/多远，它是否应该在某个点停止移动等）？
感谢您的回复。鼠标应该悬停在导航栏上的任何位置，并且只能移动到第一个项目。我在此页面的导航栏上完全复制了该功能。 bd.dk/produkter/kloak/broendgods/kuppelriste/oe315/222723000/…
从技术上讲，它可以只使用 css 并悬停，但它不会很漂亮。侦听 mousemove 并更改某些属性可能是要走的路。但是我很难理解你的意思。当用户点击它们时让项目四处移动听起来是个坏主意。
如果您查看他们的代码，他们只是将transform: translateX() 更改为0.8% 上的:hover。超级简单。如果您在此处需要帮助，您应该发布一些代码和您尝试过的内容。
是的，我已经看到了，但不知道它是如何计算的。我会尝试写一些代码。

标签： javascript jquery html css

【解决方案1】：

如下计算翻译

var posX = 0,
    navLinksContainer = $(".nav-links-bg"),
    navLinks = $(".nav-links"),
    navWidth = navLinks.width();

var widths = $.map($(".nav-links li"), function(e) {
    return $(e).outerWidth();
    }),
    totalWidth = 0;

for (var i = 0; i < widths.length; i++) {
    totalWidth += widths[i];
}
var transX = (totalWidth - navWidth)/navWidth*100;
if(transX<0)transX = 0;

navLinks.css({"transform":"translate(-"+transX+"%)"});

navLinksContainer.mousemove(function(e){
    posX = e.pageX - $(".nav-links-bg").offset().left;
    var newtransX = ((posX)/navWidth)*transX;
    navLinks.css({"transform":"translate(-"+newtransX+"%)"});

}).mouseout(function(e){
    navLinks.css({"transform":"translate(-"+transX+"%)"});
}).mouseenter(function(e){
    posX = e.pageX - $(".nav-links-bg").offset().left;
});

【讨论】：