Bewegen Sie die Navigationselemente in die entgegengesetzte Richtung zur Mausbewegung

-5

Ich habe eine Navigationsleiste mit einer Liste von Listenelementen (Menüelemente). Ich möchte die Menüelemente im Gegensatz zur Mausbewegung scrollen, d. H. Wenn ich die Maus in Menüeinträgen nach links bewege, sollten sich die Elemente problemlos nach rechts bewegen und umgekehrt. Muss ich einen Algorithmus mit Mausereignissen schreiben oder kann dies mit Transformationen geschehen, lass es mich wissen.Bewegen Sie die Navigationselemente in die entgegengesetzte Richtung zur Mausbewegung

Ich versuche, die nav-Funktionalität auf dieser Seite https://www.bd.dk/produkter/kloak/broendgods/kuppelriste/oe315/222723000/city-kuppelrist-for-315mm-kegle

PFA die Navigationsleiste

Navigation bar

Quelle

2017-05-20 Anand Rajana

Sie werden replizieren müssen sei genauer. Was ist "Mausbewegung" - Sie meinen, wenn Sie den Mauszeiger über einen Link oder ein bestimmtes Element bewegen oder die Maus einfach irgendwo auf der Seite bewegen? und was genau willst du bewegen und wie willst du es bewegen (wie viel/wie weit sollte es sich bewegen, sollte es sich irgendwann nicht mehr bewegen, etc.)? –

Danke für Ihre Antwort. Die Maus sollte irgendwo auf der Navigationsleiste schweben und kann nur bis zum ersten Gegenstand bewegt werden. Ich repliziere die Funktionalität genau in der Navigationsleiste dieser Seite. https://www.bd.dk/produkter/kloak/broendgods/kuppelriste/oe315/222723000/city-kuppelrist-for-315mm-kegle –

Technisch könnte es mit css nur gemacht werden und schweben, aber es wäre nicht hübsch. Listening für Mousemove und Ändern einiger Eigenschaften ist wahrscheinlich der Weg zu gehen. Allerdings habe ich Probleme zu verstehen, was du meinst. Gegenstände zu bewegen, wenn der Benutzer sich bewegt, um auf sie zu klicken, klingt wie eine schlechte Idee. –

Berechnet die übersetzen, wie unten

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

Quelle

2017-05-20 14:18:10

Bewegen Sie die Navigationselemente in die entgegengesetzte Richtung zur Mausbewegung

Antwort

Verwandte Themen