Web-Frontendjs-TutorialImplementierung der gleitenden Animation des Baidu News-Navigationsmenüs basierend auf jquery_jquery
Das Beispiel in diesem Artikel dient dazu, Ihnen eine JQuery zur Implementierung der gleitenden Animation des Baidu-Nachrichtennavigationsmenüs zur Verfügung zu stellen. Der spezifische Inhalt ist wie folgt
Ideen und Schritte
1. Verwenden Sie UL, um eine einfache horizontale Navigation zu erstellen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>仿百度新闻菜单滑动动画</title>
<style type="text/css">
body, div, ul, li, a
{
margin: 0px;
padding: 0px;
font-size: 20px;
color: #FFF;
border: 0;
}
.div-nav-container
{
margin-top: 50px;
width: 100%;
background-color: #01204F;
}
.div-nav
{
width: 870px;
margin: 0px auto;
}
ul
{
list-style: outside none none;
width: 100%;
height: 50px;
}
ul li
{
float: left;
}
ul li a
{
line-height: 50px;
display: block;
padding: 0px 15px;
text-align: center;
text-decoration: none;
}
</style>
</head>
<body>
<div class="div-nav-container">
<div class="div-nav">
<ul>
<li><a href="javascript:void(0)">网站首页</a></li>
<li><a href="javascript:void(0)">热点</a> </li>
<li><a href="javascript:void(0)">国际新闻</a> </li>
<li><a href="javascript:void(0)">国内新闻</a> </li>
<li><a href="javascript:void(0)">国家政策</a> </li>
<li><a href="javascript:void(0)">体育新闻</a> </li>
<li><a href="javascript:void(0)">娱乐新闻</a> </li>
<li><a href="javascript:void(0)">名人</a> </li>
<li><a href="javascript:void(0)">古迹</a> </li>
</ul>
</div>
</div>
</body>
</html>
<style type="text/css">
.div-hover
{
background-color: Red;height: 50px;
left: 0px;
top: 0px;
width: 0px;
}
</style>
<div class="div-nav">
<!--添加滑动背景-->
<div class="div-hover">
</div>
<ul>
...
</ul>
</div>3. Fügen Sie das Schiebeereignis des Menüelements hinzu und berechnen Sie die Schiebeelemente, den linken und oberen Rand und die Breite des Div-Hovers
<script type="text/javascript">
var divHoverLeft = 0;
var aWidth = 0;
$(document).ready(function () {
$("a").on({
'mouseover': function () {
SetDivHoverWidthAndLeft(this);
//设置滑动动画
$(".div-hover").stop().animate({ width: aWidth, left: divHoverLeft }, 150);
}
});
});
function SetDivHoverWidthAndLeft(element) {
divHoverLeft = GetLeft(element);
aWidth = GetWidth(element);
}
//获得Li宽度
function GetWidth(ele) {
return $(ele).parent().width();
}
//获得div-hover左边距
function GetLeft(element) {
//获得li之前的同级li元素
var menuList = $(element).parent().prevAll();
var left = 0;
//计算背景遮罩左边距
$.each(menuList, function (index, ele) {
left += $(ele).width();
});
return left;
}
</script>
Wie aus dem Vorschaueffekt hervorgeht, gibt es ein Problem mit der Positionierung von div-hover. Der div-hover sollte absolut mit dem übergeordneten Element positioniert sein, also der geänderte Code (der Kommentarteil ist der Änderungspunkt). lautet wie folgt: 
<style type="text/css">
.div-nav
{
width: 870px;
margin: 0px auto;
/*作为div-hover的父元素定位参照*/
position: relative;
}
.div-hover
{
background-color: Red;
height: 50px;
left: 0px;
top: 0px;
width: 0px;
/*以父元素绝对定位*/
position: absolute;
}
</style>
Obwohl das Positionierungsproblem gelöst wurde, schwebt das Hintergrundbild immer noch über dem Text, daher wird der Code so angepasst, dass der Text über dem roten Div schwebt: 
<style type="text/css">
ul li
{
float: left;
/*****Start（作用:导航文字浮于div-hover红色之上）*******/
position: relative;
z-index: 4;
/*********************End*************************/
}
</style>
4. Menüklick und Standardmenüauswahl auf der Ladeseite hinzufügen;
Effektvorschau
<style type="text/css">
/**设置菜单激活***/
.active
{
background-color: Red;
}
</style>
<script type="text/javascript">
var divHoverLeft = 0;
var aWidth = 0;
$(document).ready(function () {
$("a").on({
'mouseover': function () {
SetDivHoverWidthAndLeft(this);
//设置滑动动画
$(".div-hover").stop().animate({ width: aWidth, left: divHoverLeft }, 150);
},
/*添加点击事件*/
'click': function () {
SetDivHoverWidthAndLeft(this);
//清除所有a标签class
$('a').removeClass();
//设置当前点击菜单为激活状态
$(this).addClass('active');
}
});
});
</script>
</head>
<body>
<div class="div-nav-container">
<div class="div-nav">
<!--添加滑动背景-->
<div class="div-hover">
</div>
<ul>
<--默认菜单激活-->
<li><a class="active" href="javascript:void(0)">网站首页</a></li>
…………
</ul>
</div>
</div>
</body>
</html>
5. Fügen Sie die Funktion hinzu, die Maus aus dem Bereich zu bewegen und das aktuell aktivierte Element automatisch zu lokalisieren
Bevor wir diese Funktion ausführen, denken wir zunächst darüber nach. Bei Mouse-Out-Vorgängen können wir uns Mouseout- und Mouseleave-Ereignisse vorstellen. Dann stellen sich die folgenden Fragen: 
②Auf welchem Element befindet sich das ausgewählte Ereignis?
③Woher wissen Sie, welches Element gerade aktiviert ist, nachdem Sie die Maus herausbewegt haben?
④Wie erkennt man die äquivalenten Werte für den linken Rand und die Breite von div-hover?
Übung bringt wahres Wissen, dann übe es:
Am Beispiel von Mouseout ist das erste Problem natürlich gelöst
Zweitens: Auf welchem Element befindet sich das Ereignis? Durch die Analyse des obigen GIF-Diagramms wird, wenn die Positionierung im A-Tag oder Li-Tag erfolgt, die Mausbewegung zum Wechseln zwischen dem A-Tag oder dem Li-Tag auch eine automatische Positionierung zum aktiven Element auslösen (vorausgesetzt, dass dies automatisch erfolgt). Die Positionierung wurde durchgeführt) und die folgende Abbildung wird angezeigt:
Es kann also nicht auf dem A- oder Li-Tag positioniert werden. Wenn Sie noch einmal darüber nachdenken, sollten Sie die Maus aus dem gesamten Navigationsbereich bewegen. Dann können Sie leicht herausfinden, welches Element positioniert werden soll auf UL oder dem übergeordneten Element von UL sind die gleichen, daher sind beide Elemente in Ordnung. Wenn die Größen der beiden Elemente inkonsistent sind, sollten sie auf dem UL positioniert werden. Es gibt also einen Code ähnlich dem folgenden:
Woher wissen Sie dann, welches Element gerade aktiviert ist? Sie können ausgeblendete Felder oder andere Anzeigemethoden verwenden, um die Breite und den linken Rand des aktuell angeklickten Elements zu speichern Die Daten können erneut gelesen und dann animiert werden. Dadurch werden die oben genannten ③④-Probleme gelöst:
$("ul").on({
'mouseout': function (event) {
/*动画定位div-hover位置到激活元素*/
}
});
效果展示:
看图发现依旧出现之前类似定位在A或Li的问题,出现这种情况的原因:
jquery中mouseout如果定位在一个元素上,例如div,那么此div之下的元素都会具有mouseout事件,也就是常说的,事件冒泡机制;与此类似的事件如mousedown,mouseover等，那么是不是阻止事件冒泡就行了呢? 理论上是这样的。通常阻止冒泡有两种方式: event.stopPropagation();和return false;当然他们之间也是有区别的。
相关代码修改如下：
<script type="text/javascript">
..........
$(document).ready(function () {
/*鼠标滑出UL或者div-nav背景div-hover自动定位到激活菜单处*/
$("ul").on({
'mouseout': function (event) {
$(".div-hover").stop().animate({ width: $(".h-width").val(), left: $(".h-left").val() }, 150);
/**阻止冒泡**/
event.stopPropagation();
//return false;
}
});
});
.......
</script>
无论何种阻止方式,都没有卵用,依旧阻止不了冒泡,效果可想而知,与上面Gif图所示无异;
由此证明，mouseover在实现此功能方面是有问题的;
那换mouseleave呢，除了将mouseover修改为mouseleave和去除冒泡代码外,其他代码不做改动，实验效果如下:
从上图可以看出,效果与百度新闻导航滑动基本无异,至此大功告成;
完整代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>仿百度新闻菜单滑动动画</title>
<style type="text/css">
body, div, ul, li, a
{
margin: 0px;
padding: 0px;
font-size: 20px;
color: #FFF;
border: 0;
}
.div-nav-container
{
margin-top: 50px;
width: 100%;
background-color: #01204F;
}
.div-nav
{
/*作为div-hover的父元素定位参照*/
position: relative;
width: 870px;
margin: 0px auto;
}
.div-hover
{
background-color: Red;
/*以父元素绝对定位*/
position: absolute;
height: 50px;
left: 0px;
top: 0px;
width: 0px;
}
ul
{
list-style: outside none none;
width: 100%;
height: 50px;
}
ul li
{
float: left;
/*****Start（作用:导航文字浮于div-hover红色之上）*******/
position: relative;
z-index: 4;
/*********************End*************************/
}
ul li a
{
line-height: 50px;
display: block;
padding: 0px 15px;
text-align: center;
text-decoration: none;
}
/**设置菜单激活***/
.active
{
background-color: Red;
}
</style>
<script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
var divHoverLeft = 0;
var aWidth = 0;
$(document).ready(function () {
//菜单滑动动画
$("a").on({
/*此处用mouseover或者mouseenter均可，如果以后要为X标签同时添加悬停和移出事件，建议用enter和leave也就是传说中的hover事件，因为里面事件冒泡已经处理过，就不会出现类似over和out之类的情况了*/
'mouseenter': function () {
SetDivHoverWidthAndLeft(this);
//设置滑动动画
$(".div-hover").stop().animate({ width: aWidth, left: divHoverLeft }, 150);
},
'click': function () {
SetDivHoverWidthAndLeft(this);
//清除所有a标签class
$('a').removeClass();
//设置当前点击菜单为激活状态
$(this).addClass('active');
$(".h-width").val(aWidth);
$(".h-left").val(divHoverLeft);
}
});
/*鼠标滑出UL或者div-nav背景div-hover自动定位到激活菜单处*/
//mouseleave事件定位到ul或者div-nav均可
$("ul").on({
'mouseleave': function (event) {
$(".div-hover").stop().animate({ width: $(".h-width").val(), left: $(".h-left").val() }, 150);
}
});
});
function SetDivHoverWidthAndLeft(element) {
divHoverLeft = GetLeft(element);
aWidth = GetWidth(element);
}
//获得Li宽度
function GetWidth(ele) {
return $(ele).parent().width();
}
//获得div-hover左边距
function GetLeft(element) {
//获得li之前的同级li元素
var menuList = $(element).parent().prevAll();
var left = 0;
//计算背景遮罩左边距
$.each(menuList, function (index, ele) {
left += $(ele).width();
});
return left;
}
</script>
</head>
<body>
<div class="div-nav-container">
<div class="div-nav">
<!--添加滑动背景-->
<div class="div-hover">
</div>
<ul>
<li><a class="active" href="javascript:void(0)">网站首页</a></li>
<li><a href="javascript:void(0)">热点</a> </li>
<li><a href="javascript:void(0)">国际新闻</a> </li>
<li><a href="javascript:void(0)">国内新闻</a> </li>
<li><a href="javascript:void(0)">国家政策</a> </li>
<li><a href="javascript:void(0)">体育新闻</a> </li>
<li><a href="javascript:void(0)">娱乐新闻</a> </li>
<li><a href="javascript:void(0)">名人</a> </li>
<li><a href="javascript:void(0)">古迹</a> </li>
</ul>
</div>
</div>
<input type="hidden" class="h-width" value="110" />
<input type="hidden" class="h-left" value="0" />
</body>
</html>
总结和关键点
1.背景滑动由某个块状元素(此处用的div)来实现,而非本元素的hover改变背景颜色;
2.注意元素定位(滑动块状元素以谁来绝对定位或者相对定位，左边距的计算和自身宽度的计算；滑动块状元素div-hover和li之间的相对定位，以及层级大小)；
3.滑动动画事件animate和记录激活菜单，鼠标移出区域自定定位到激活菜单；
4.jquery中mouseover，mouseout以及mouseenter，mouseleave关于冒泡机制的区别；（前两个未做冒泡机制的限制，后两个冒泡已经经过处理，事件只针对注册元素本身，而不会对子元素起作用，mouseenter和mouseleave用在一个元素标签上可以用hover事件代替，本身hover就是这两者的封装，如果事件在不同元素标签上，最好分开调用mouseenter和mouseleave事件）
5.所有关键点以及作用都已经在代码各处加上注释，各位可以看看。
希望本文对大家学习jquery程序设计有所帮助。
Ersetzen Sie Stringzeichen in JavaScriptMar 11, 2025 am 12:07 AMDetaillierte Erläuterung der Methode für JavaScript -Zeichenfolge und FAQ In diesem Artikel werden zwei Möglichkeiten untersucht, wie String -Zeichen in JavaScript ersetzt werden: Interner JavaScript -Code und interne HTML für Webseiten. Ersetzen Sie die Zeichenfolge im JavaScript -Code Die direkteste Möglichkeit ist die Verwendung der Ersatz () -Methode: str = str.replace ("find", "ersetzen"); Diese Methode ersetzt nur die erste Übereinstimmung. Um alle Übereinstimmungen zu ersetzen, verwenden Sie einen regulären Ausdruck und fügen Sie das globale Flag G hinzu:: STR = Str.Replace (/fi
Erstellen Sie Ihre eigenen AJAX -WebanwendungenMar 09, 2025 am 12:11 AMHier sind Sie also bereit, alles über dieses Ding namens Ajax zu lernen. Aber was genau ist das? Der Begriff AJAX bezieht sich auf eine lose Gruppierung von Technologien, mit denen dynamische, interaktive Webinhalte erstellt werden. Der Begriff Ajax, ursprünglich von Jesse J geprägt
Wie erstelle ich meine eigenen JavaScript -Bibliotheken?Mar 18, 2025 pm 03:12 PMIn Artikel werden JavaScript -Bibliotheken erstellt, veröffentlicht und aufrechterhalten und konzentriert sich auf Planung, Entwicklung, Testen, Dokumentation und Werbestrategien.
Wie optimiere ich den JavaScript -Code für die Leistung im Browser?Mar 18, 2025 pm 03:14 PMIn dem Artikel werden Strategien zur Optimierung der JavaScript -Leistung in Browsern erörtert, wobei der Schwerpunkt auf die Reduzierung der Ausführungszeit und die Minimierung der Auswirkungen auf die Lastgeschwindigkeit der Seite wird.
Wie debugge ich den JavaScript -Code effektiv mithilfe von Browser -Entwickler -Tools?Mar 18, 2025 pm 03:16 PMIn dem Artikel werden effektives JavaScript -Debuggen mithilfe von Browser -Entwickler -Tools, der Schwerpunkt auf dem Festlegen von Haltepunkten, der Konsole und der Analyse der Leistung erörtert.
JQuery MatrixeffekteMar 10, 2025 am 12:52 AMBringen Sie Matrix -Filmeffekte auf Ihre Seite! Dies ist ein cooles JQuery -Plugin, das auf dem berühmten Film "The Matrix" basiert. Das Plugin simuliert die klassischen grünen Charakter-Effekte im Film und wählen Sie einfach ein Bild aus, und das Plugin verwandelt es in ein mit numerischer Zeichen gefüllte Bild im Matrix-Stil. Komm und probiere es aus, es ist sehr interessant! Wie es funktioniert Das Plugin lädt das Bild auf die Leinwand und liest die Pixel- und Farbwerte: Data = ctx.getImagedata (x, y, setting.grainize, setting.grainesize) .data Das Plugin liest geschickt den rechteckigen Bereich des Bildes und berechnet JQuery, um die durchschnittliche Farbe jedes Bereichs zu berechnen. Dann verwenden Sie
So bauen Sie einen einfachen JQuery SliderMar 11, 2025 am 12:19 AMIn diesem Artikel werden Sie mit der JQuery -Bibliothek ein einfaches Bildkarousel erstellen. Wir werden die BXSLIDER -Bibliothek verwenden, die auf JQuery basiert und viele Konfigurationsoptionen zum Einrichten des Karussells bietet. Heutzutage ist Picture Carousel zu einem Muss auf der Website geworden - ein Bild ist besser als tausend Wörter! Nachdem Sie sich entschieden haben, das Bild -Karussell zu verwenden, ist die nächste Frage, wie Sie es erstellen. Zunächst müssen Sie hochwertige, hochauflösende Bilder sammeln. Als nächstes müssen Sie ein Bildkarousel mit HTML und einem JavaScript -Code erstellen. Es gibt viele Bibliotheken im Web, die Ihnen helfen können, Karussell auf unterschiedliche Weise zu erstellen. Wir werden die Open -Source -BXSLIDER -Bibliothek verwenden. Die BXSLIDER -Bibliothek unterstützt reaktionsschnelles Design, sodass das mit dieser Bibliothek gebaute Karussell an alle angepasst werden kann
So laden und herunterladen Sie CSV -Dateien mit Angular hoch und laden Sie sie herunterMar 10, 2025 am 01:01 AMDatensätze sind äußerst wichtig für den Aufbau von API -Modellen und verschiedenen Geschäftsprozessen. Aus diesem Grund ist das Import und Exportieren von CSV eine häufig benötigte Funktionalität. In diesem Tutorial lernen Sie, wie Sie eine CSV-Datei in einem Angular herunterladen und importieren.
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
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
mPDF
mPDF ist eine PHP-Bibliothek, die PDF-Dateien aus UTF-8-codiertem HTML generieren kann. Der ursprüngliche Autor, Ian Back, hat mPDF geschrieben, um PDF-Dateien „on the fly“ von seiner Website auszugeben und verschiedene Sprachen zu verarbeiten. Es ist langsamer und erzeugt bei der Verwendung von Unicode-Schriftarten größere Dateien als Originalskripte wie HTML2FPDF, unterstützt aber CSS-Stile usw. und verfügt über viele Verbesserungen. Unterstützt fast alle Sprachen, einschließlich RTL (Arabisch und Hebräisch) und CJK (Chinesisch, Japanisch und Koreanisch). Unterstützt verschachtelte Elemente auf Blockebene (wie P, DIV),
SublimeText3 Englische Version
Empfohlen: Win-Version, unterstützt Code-Eingabeaufforderungen!
MinGW – Minimalistisches GNU für Windows
Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.
ZendStudio 13.5.1 Mac
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
