Question

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

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

PFA导航栏

Navigation bar

Answer 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;
});

将导航项目移向与鼠标移动相反的方向

1 个答案: