Js realisiert den verzögerungsfreien Menüeffekt von Jingdong (Demo)
Es ist das Drachenbootfest, es sind so viele Leute draußen und es ist so heiß, dass ich denke, ich kann zu Hause bleiben und MOOCs lesen, um mich zu bereichern ...
Dies ist ein js, um den verzögerungsfreien Menüeffekt von JD.com zu implementieren. Es fühlt sich sehr gut an. Teilen Sie es mit allen.
<span style="color: #000000">先来理清思路:<br>1.开发基本的菜单结构 2.开发普通的二级菜单效果 3.假如延迟解决移动问题 切换子菜单时候，用setTimeout设置延迟 debounce去抖技 在事件被频繁触发是，只执行一次处理 4.解决延迟引入的新问题 跟踪鼠标的移动 用鼠标当前位置，和鼠标上一次位置与子菜单上下边缘的三角形区域进行比较 运用到向量 二位向量叉乘公式 用叉乘法判断点在三角形内</span>
最终效果：鼠标自然的移动和点击到子菜单 切换时无延迟
Starten Sie den folgenden Code:
Grundlegende Menüstruktur entwickeln
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>京东菜单无刷新</title><script src="js/jquery-1.7.2.min.js?1.1.11"></script><script src="js/mche.js?1.1.11"></script><script src="js/function.js?1.1.11"></script><style>.wrap{position:relative;width:200px;left:50px;top:50px;}ul{padding:15px;margin:9;list-style:none;background:#6c6669;color:#ffffff;border-right-width:0;}/*水平居中*/li{display:block;height:30px;line-height: 30px;padding-left:12px;cursor:pointer;font-size: 14px;position:relative;}/*鼠标移动上去的背景色*/li.active{background:#999395;}/*js可以很好地调用类，一般效果css实现就好*/li span:hover{color:#c81623;}/*隐藏的类*/.none{display: none;}/*二级菜单*/#sub{width:600px;position: absolute;border:1px solid #f7f7f7;background:#f7f7f7;box-shadow:2px 0 rgba(0,0,0,.3);left: 200px;top:0;box-sizing:border-box;margin: 0px;padding:10px;}.sub-content a{font-style:12px;color:#666;text-decoration:none;}.sub-content dd a{border-left:1px solid #e0e0e0;padding:0 1px;margin:4px 0;}.sub-content dl {overflow:hidden;}.sub-content dt{float: left;width:70px;font-weight: bold;clear:left;position:relative;}.sub-content dd {float: left;margin-left: 5px;border-top:1px solid #eee;margin-bottom: 5px;}.sub-content dt i{width:4px;height: 14px;font:400 9px/14px consolas;position: absolute;right:5px;top:5px;}</style></head><body><div class="wrap" id="test"><ul><li data-id="a"><span>家用电器</span> </li><li data-id="b"><span>手机 / 运营商 / 数码</span> </li><li data-id="c"><span>电脑办公 / 办公</span> </li><li data-id="d"><span>家居 / 家具 / 家装 / 厨具</span> </li><li data-id="e"><span>男装 / 女装 / 童装 / 内衣 </span> </li><li data-id="f"><span>美妆个护 / 宠物 </span> </li><li data-id="g"><span>女鞋 / 箱包 / 钟表 / 珠宝 </span> </li><li data-id="h"><span>男鞋 / 运动 / 户外</span> </li><li data-id="i"><span>汽车 / 汽车用品 </span> </li></ul><div id="sub" class="none"><div id="a" class="sub-content none"><dl><dt><a href="#">电视<i>></i></a></dt><dd><a href="#">曲面电视</a><a href="#">超薄电视</a><a href="#">HDR电视</a><a href="#">DLED电视</a></dd><dt><a href="#">空调<i>></i></a></dt><dd><a href="#">挂壁式空调</a><a href="#">柜式空调</a><a href="#">中央空调</a><a href="#">以旧换新</a></dd><dt><a href="#">洗衣机<i>></i></a></dt><dd><a href="#">滚筒式洗衣机</a><a href="#">洗烘一体机</a><a href="#">波轮洗衣机</a><a href="#">迷你洗衣机</a></dd></dl></div><div id="b" class="sub-content none"><dl><dt><a href="#">手机通讯<i>></i></a></dt><dd><a href="#">手机</a><a href="#">对讲机</a><a href="#">以旧换新</a><a href="#">手机维修</a></dd><dt><a href="#">运营商<i>></i></a></dt><dd><a href="#">合约机</a><a href="#">选号机</a><a href="#">固定电话</a><a href="#">办宽带</a></dd><dt><a href="#">手机配件<i>></i></a></dt><dd><a href="#">手机壳</a><a href="#">贴膜</a><a href="#">手机存储卡</a><a href="#">数据线</a></dd></dl></div><div id="c" class="sub-content none"><dl><dt><a href="#">电脑整机<i>></i></a></dt><dd><a href="#">笔记本</a><a href="#">游戏本</a><a href="#">平板电脑</a></dd><dt><a href="#">电脑配件<i>></i></a></dt><dd><a href="#">显示器</a><a href="#">CPU</a><a href="#">主板</a></dd><dt><a href="#">外设产品<i>></i></a></dt><dd><a href="#">鼠标</a><a href="#">键盘</a><a href="#">键盘套餐</a></dd></dl></div><div id="d" class="sub-content none"><dl><dt><a href="#">厨具<i>></i></a></dt><dd><a href="#">烹饪锅具</a><a href="#">刀剪配件</a><a href="#">厨房配件</a><a href="#">水具酒具</a></dd><dt><a href="#">家纺<i>></i></a></dt><dd><a href="#">床品套件</a><a href="#">被子</a><a href="#">枕芯</a><a href="#">蚊帐</a></dd><dt><a href="#">生活日用<i>></i></a></dt><dd><a href="#">收纳用品</a><a href="#">雨伞雨具</a><a href="#">净化除味</a><a href="#">浴室用品</a></dd></dl></div><div id="e" class="sub-content none"><dl><dt><a href="#">女装<i>></i></a></dt><dd><a href="#">商城同款</a><a href="#">当季热卖</a><a href="#">2017新品</a><a href="#">连衣裙</a></dd><dt><a href="#">男装<i>></i></a></dt><dd><a href="#">商城同款</a><a href="#">当季热卖</a><a href="#">2017新品</a><a href="#">牛仔裤</a></dd></dl></div><div id="f" class="sub-content none"><dl><dt><a href="#">面部护肤<i>></i></a></dt><dd><a href="#">补水保湿</a><a href="#">卸妆</a><a href="#">洁面</a></dd></dl></div></div></ul></body></html>Lösen Sie das 2. und 3. Problem
$(document).ready(function(){var sub = $('#sub')var activeRowvar activeMenuvar timervar mouseInSub = falsesub.on('mouseenter',function(e){
mouseInSub = true}).on('mouseleave',function(e){
mouseInSub = false})var mouseTrack = []var moveHandler = function(e){
mouseTrack.push({
x:e.pageX,
y:e.pageY
})if(mouseTrack.length > 3){
mouseTrack.shift()
}
}
$('#test')
.on('mouseenter',function(e){
sub.removeClass('none')
$(document).bind('mousemove',moveHandler)
})
.on('mouseleave',function(e){
sub.addClass('none')if(activeRow){
activeRow.removeClass('active')
activeRow = null;
}if(activeMenu){
activeMenu.addClass('none')
activeMenu = null;
}//解绑$(document).unbind('mousemove',moveHandler)
})
.on('mouseenter','li',function(e){if(!activeRow){
activeRow = $(e.target).addClass('acrive')
activeMenu = $('#'+activeRow.data('id'))
activeMenu.removeClass('none')return}//清除if(timer){
clearTimeout(timer)
}//鼠标当前坐标var currMousePos = mouseTrack[mouseTrack.length - 1]//上次的坐标var leftCorner = mouseTrack[mouseTrack.length-2]var delay = needDelay(sub,leftCorner,currMousePos)if(delay){// 时间触发，设置一个缓冲期timer = setTimeout(function(){//判断if(mouseInSub){return}
activeRow.removeClass('active')
activeMenu.addClass('none')
activeRow = $(e.target)
activeRow.addClass('active')
activeMenu = $('#'+ activeRow.data('id'))
activeMenu.removeClass('none')
timer = null}, 300)
}else{var prevActiveRow = activeRowvar prevActiveMenu = activeMenu
activeRow = $(e.target)
activeMenu = $('#' + activeRow.data('id'))
prevActiveRow.removeClass('active')
prevActiveMenu.addClass('none')
activeRow.addClass('active')
activeMenu.removeClass('none')
}
})
})Lösung neuer Probleme, die durch Verzögerung entstanden sind
function sameSign(a,b){return (a ^ b) >= 0}function vector(a,b){return{
x:b.x - a.x,
y:b.y - a.y
}
}function vectorProduct(v1,v2){return v1.x * v2.y - v2.x * v1.y
}function isPointInTrangle(p,a,b,c){var pa = vector(p,a)var pb = vector(p,b)var pc = vector(p,c)var t1 = vectorProduct(pa,pb)var t2 = vectorProduct(pb,pc)var t3 = vectorProduct(pc,pa)return sameSign(t1,t2) && sameSign(t2,t3)
}
function needDelay(elem,leftCorner,currMousePos){var offset = elem.offset()var topLeft = {
x:offset.left,
y:offset.top
}var bottomLeft = {
x:offset.left,
y:offset.top + elem.height()
}return isPointInTrangle(currMousePos,leftCorner,topLeft,bottomLeft)
}Wenn Sie das sehen, haben Sie den verzögerungsfreien Menüeffekt von JD.com erkannt, und gleichzeitig mag ich Sie auch, Sie können es hier sehen.
Einmal drinnen Die IT-Branche ist so tief wie das Meer, was mir das Gefühl gibt, dass es notwendig ist, eine positive Lerneinstellung beizubehalten. Ich nutze einen Blog, um meine Fortschritte festzuhalten.
Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen und wir können gemeinsam diskutieren und Fortschritte erzielen.
Das obige ist der detaillierte Inhalt vonJs realisiert den verzögerungsfreien Menüeffekt von Jingdong (Demo). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Benutzer stoßen auf seltene Störungen: Bei Samsung Watch-Smartwatches treten plötzlich Probleme mit dem weißen Bildschirm auf
Apr 03, 2024 am 08:13 AM
Möglicherweise sind Sie schon einmal auf das Problem gestoßen, dass auf dem Bildschirm Ihres Smartphones grüne Linien erscheinen. Auch wenn Sie es noch nie gesehen haben, müssen Sie entsprechende Bilder im Internet gesehen haben. Haben Sie schon einmal erlebt, dass der Bildschirm einer Smartwatch weiß wird? Am 2. April erfuhr CNMO aus ausländischen Medien, dass ein Reddit-Benutzer ein Bild auf der sozialen Plattform geteilt hatte, auf dem zu sehen war, wie der Bildschirm der Smartwatches der Samsung Watch-Serie weiß wurde. Der Benutzer schrieb: „Ich war gerade dabei, aufzuladen, und als ich zurückkam, war es so. Ich habe versucht, neu zu starten, aber der Bildschirm der Samsung Watch wurde beim Neustart immer noch weiß.“ Der Reddit-Benutzer hat das Smartwatch-spezifische Modell nicht angegeben. Dem Bild nach zu urteilen dürfte es sich jedoch um eine Samsung Watch5 handeln. Zuvor hatte sich auch ein anderer Reddit-Benutzer gemeldet
Wie implementiert man die doppelte WeChat-Anmeldung auf Huawei-Mobiltelefonen?
Mar 24, 2024 am 11:27 AM
Wie implementiert man die doppelte WeChat-Anmeldung auf Huawei-Mobiltelefonen? Mit dem Aufkommen der sozialen Medien ist WeChat zu einem unverzichtbaren Kommunikationsmittel im täglichen Leben der Menschen geworden. Viele Menschen können jedoch auf ein Problem stoßen: Sie können sich gleichzeitig auf demselben Mobiltelefon bei mehreren WeChat-Konten anmelden. Für Huawei-Mobiltelefonbenutzer ist es nicht schwierig, eine doppelte WeChat-Anmeldung zu erreichen. In diesem Artikel wird erläutert, wie eine doppelte WeChat-Anmeldung auf Huawei-Mobiltelefonen erreicht wird. Erstens bietet das EMUI-System, das mit Huawei-Mobiltelefonen geliefert wird, eine sehr praktische Funktion – das doppelte Öffnen von Anwendungen. Durch die doppelte Öffnungsfunktion der Anwendung können Benutzer gleichzeitig
Kyushu Fengshen Assassin 4S Kühlertest Luftgekühlter „Assassin Master'-Stil
Mar 28, 2024 am 11:11 AM
Apropos ASSASSIN: Ich glaube, die Spieler werden in „Assassin’s Creed“ definitiv an die Meisterassassinen denken. Sie sind nicht nur geschickt, sondern haben auch das Credo, „sich der Dunkelheit zu widmen und dem Licht zu dienen“. bekanntes Haushaltsgehäuse/Stromversorgung/Kühlung Die luftgekühlten Flaggschiff-Heizkörper der ASSASSIN-Serie der Gerätemarke DeepCool stimmen überein. Vor kurzem wurde das neueste Produkt dieser Serie, ASSASSIN4S, auf den Markt gebracht: „Assassin in Suit, Advanced“ bietet fortgeschrittenen Spielern ein neues Luftkühlungserlebnis. Das Erscheinungsbild ist voller Details. Die Außenseite ist mit einer würfelförmigen Verkleidung versehen, die in den Farben Weiß und Schwarz erhältlich ist Farben, um verschiedene Farben zu treffen
PHP-Programmierhandbuch: Methoden zur Implementierung der Fibonacci-Folge
Mar 20, 2024 pm 04:54 PM
Die Programmiersprache PHP ist ein leistungsstarkes Werkzeug für die Webentwicklung, das eine Vielzahl unterschiedlicher Programmierlogiken und Algorithmen unterstützen kann. Unter diesen ist die Implementierung der Fibonacci-Folge ein häufiges und klassisches Programmierproblem. In diesem Artikel stellen wir vor, wie Sie die Fibonacci-Folge mit der Programmiersprache PHP implementieren, und fügen spezifische Codebeispiele bei. Die Fibonacci-Folge ist eine mathematische Folge, die wie folgt definiert ist: Das erste und das zweite Element der Folge sind 1, und ab dem dritten Element ist der Wert jedes Elements gleich der Summe der beiden vorherigen Elemente. Die ersten paar Elemente der Sequenz
Exquisite Licht- und Schattenkunst im Frühling, Haqu H2 ist die kostengünstige Wahl
Apr 17, 2024 pm 05:07 PM
Mit der Ankunft des Frühlings erwacht alles zum Leben und alles ist voller Lebenskraft und Vitalität. Wie können Sie Ihrem Zuhause in dieser schönen Jahreszeit einen Hauch von Farbe verleihen? Der Haqu H2-Projektor ist mit seinem exquisiten Design und seiner hervorragenden Kosteneffizienz in diesem Frühling zu einer unverzichtbaren Schönheit geworden. Dieser H2-Projektor ist kompakt und dennoch stilvoll. Ob auf dem Fernsehschrank im Wohnzimmer oder neben dem Nachttisch im Schlafzimmer platziert, es kann zu einer wunderschönen Landschaft werden. Sein Gehäuse besteht aus einer milchig-weißen, matten Textur, die dem Projektor nicht nur ein fortschrittlicheres Aussehen verleiht, sondern auch den Tragekomfort erhöht. Das beigefarbene Material mit Lederstruktur verleiht dem Gesamtbild einen Hauch von Wärme und Eleganz. Diese Kombination aus Farben und Materialien entspricht nicht nur dem ästhetischen Trend moderner Häuser, sondern lässt sich auch integrieren
Test des Vollmodul-Netzteils Huntkey MX750P: 750 W geballte Platin-Stärke
Mar 28, 2024 pm 03:20 PM
Mit ihrer kompakten Größe hat die ITX-Plattform viele Spieler angezogen, die nach ultimativer und einzigartiger Schönheit streben. Mit der Verbesserung der Herstellungsprozesse und technologischen Fortschritten können sowohl Intels Core- als auch RTX40-Grafikkarten der 14. Generation ihre Stärke auf der ITX-Plattform ausspielen Auch Gamer stellen höhere Anforderungen an die SFX-Stromversorgung. Der Spiele-Enthusiast Huntkey hat ein neues Netzteil der MX-Serie auf den Markt gebracht, das hohe Leistungsanforderungen erfüllt. Das Vollmodul-Netzteil MX750P verfügt über eine Nennleistung von bis zu 750 W und hat die 80PLUS-Platin-Zertifizierung bestanden. Nachfolgend bringen wir die Bewertung dieses Netzteils. Das Vollmodul-Netzteil Huntkey MX750P verfügt über ein einfaches und modisches Designkonzept. Es stehen zwei Modelle in Schwarz und Weiß zur Auswahl. Beide verfügen über eine matte Oberflächenbehandlung und haben eine gute Textur mit silbergrauen und roten Schriftarten.
4K-HD-Bilder ganz einfach verstehen! Dieses große multimodale Modell analysiert automatisch den Inhalt von Webplakaten und ist damit für Mitarbeiter sehr praktisch.
Apr 23, 2024 am 08:04 AM
Ein großes Modell, das den Inhalt von PDFs, Webseiten, Postern und Excel-Diagrammen automatisch analysieren kann, ist für Mitarbeiter nicht besonders praktisch. Das von Shanghai AILab, der Chinesischen Universität Hongkong und anderen Forschungseinrichtungen vorgeschlagene Modell InternLM-XComposer2-4KHD (abgekürzt IXC2-4KHD) macht dies Wirklichkeit. Im Vergleich zu anderen multimodalen großen Modellen, deren Auflösungsgrenze nicht mehr als 1500 x 1500 beträgt, erhöht diese Arbeit das maximale Eingabebild multimodaler großer Modelle auf eine Auflösung von über 4K (3840 x 1600) und unterstützt jedes Seitenverhältnis und 336 Pixel bis 4K Dynamische Auflösungsänderungen. Drei Tage nach seiner Veröffentlichung stand das Modell an der Spitze der Beliebtheitsliste der visuellen Frage-Antwort-Modelle von HuggingFace. Einfach zu bedienen
JD.com verbessert seinen Frachtversicherungsservice „kostenlose Rückgabe und Umtausch von Tür zu Tür' weiter, der voraussichtlich Ende August vollständig eingeführt wird
Aug 14, 2024 am 10:09 AM
Diese Website berichtete am 13. August, dass JD.com im April einen „kostenlosen Rückgabe- und Umtauschservice von Tür zu Tür“ eingeführt habe, um das Einkaufserlebnis der Verbraucher zu verbessern und Händlern bequemere und effizientere Auftragsverwaltungstools für den Kundendienst zu bieten dieses Jahr. Hinweis auf dieser Website: Der Service „Kostenlose Rückgabe und Umtausch von Tür zu Tür“ bedeutet, dass der Händler den Service „Kostenlose Rückgabe und Umtausch von Tür zu Tür“ aktiviert, nachdem er sich für eine „Frachtversicherung (erweiterte Version)“ angemeldet hat , veranlasst der Verbraucher eine Rückgabe oder einen Umtausch der Ware mit dem an der Rezeption angezeigten Logo „Kostenlose Rückgabe und Umtausch von Tür zu Tür“. Bei der Anforderung von Waren erbringt die Versicherungsgesellschaft Versicherungsleistungen für die anfallende Einwegversandgebühr Rückgabe und Umtausch. Wenn die Frachtversicherung erfüllt ist (einschließlich der Frachtversicherung des Verkäufers und der Frachtversicherung des Käufers), berechnet der Zusteller dem Kunden bei der Abholung des Pakets keine Frachtkosten, und dem Händler werden nach der Abholung des Pakets auch keine Frachtkosten berechnet. Stattdessen wird die Versicherung übernommen Das Unternehmen zahlt die Entschädigung direkt an Beijing Delivery. Auf der Detailseite wird angezeigt, dass der Versandbetrag 0 beträgt. Jetzt
