リスト項目（メニュー項目）のリストを持つナビゲーションバーがあります。私はメニュー項目をマウス移動の反対にスクロールしたいと思います。つまり、メニュー項目の左方向にマウスを動かすと、項目はスムーズに移動し、逆も同様です。私はマウスイベントでアルゴリズムを書く必要がありますか、これは変換で行うことができます私に教えてください。ナビゲーション項目をマウス移動の反対方向に移動
私はこのページにナビゲーション機能を複製しようとしているhttps://www.bd.dk/produkter/kloak/broendgods/kuppelriste/oe315/222723000/city-kuppelrist-for-315mm-kegle
PFAバーは以下のように変換する計算
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;
});
あなたがする必要がありますナビゲーション具体的に。 「マウス移動」とは、リンクや特定の要素の上にカーソルを置いたり、ページ上の任意の場所にマウスを移動するだけの場合です。あなたは正確に何を動かしたいのですか？それをどのように動かすか（どのくらい遠く/遠くに動かすべきか、ある時点で動きを止めるべきかなど）？ –
ご返信ありがとうございます。マウスはナビゲーションバーのどこにでも移動し、最初の項目までしか移動できません。私はこのページのナビゲーションバーに機能を正確に複製しています。 https://www.bd.dk/produkter/kloak/broendgods/kuppelriste/oe315/222723000/city-kuppelrist-for-315mm-kegle –
技術的には、CSSのみでホバーできますが、それほど美しくはありません。 mousemoveのリスニングといくつかのプロパティの変更はおそらく行く方法です。しかし、私はあなたが何を意味しているのか理解していない。ユーザーが悪いアイデアのように聞こえるように移動すると、アイテムが移動します。 –