JQuery-Methode, um den Effekt der U-Bahn-Linien-Anzeigeleuchte sign

Heim

Web-Frontend

js-Tutorial

JQuery-Methode, um den Effekt der U-Bahn-Linien-Anzeigeleuchte sign_jquery zu realisieren

May 16, 2016 pm 04:11 PM

jquery Kontrollleuchte 效果方法

Das Beispiel in diesem Artikel beschreibt die Methode zur Verwendung von Jquery, um den Effekt von U-Bahn-Linienanzeigelampen zu erzielen. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Freunde, die oft mit der U-Bahn fahren, müssen beobachtet haben, dass die grüne Anzeigelampe bei laufender U-Bahn immer wieder von einer Richtung in die andere fährt und erst dann anhält, wenn sie die Station erreicht hat, die ich mir schon immer gewünscht habe um dies zu tun. Nach sorgfältiger Überlegung habe ich heute endlich einen Hinweis bekommen und es hat zu einigen Ergebnissen geführt. Obwohl es noch Optimierungspotenzial gibt, werde ich zuerst den Code veröffentlichen. Allerdings stimmt etwas mit dem Code im Kommentar nicht. Wenn der letzte Index erreicht ist, wird die Farbe erneut bei Index 0 hinzugefügt, aber nach der zweiten Ausführung beginnt sie nicht mehr bei Index 0.

Code kopieren Der Code lautet wie folgt:

<!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">

<Kopf>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jquery U-Bahn-Linienanzeige</title>

<script src="js/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){

var index=0;

setInterval(function(){

$("li").eq( index).addClass("hover").siblings().removeClass("hover");

if(index==13){

index=0

//Es stimmt etwas mit dem Code nicht, er führt den Index 0 erneut aus und beginnt mit dem Hinzufügen von Farbe, aber er beginnt nach der zweiten Ausführung nicht mit dem Index 0 Problem liegt. Interessierte Freunde können es verbessern. 

$("li").eq( index).addClass("hover").siblings().removeClass("hover");

}

},400)

})

</script>

<style type="text/css">

.lingbox{position:relative;height:30px;padding-top:100px;width:720px;margin:0 auto;}

.bg{height:2px;background:red;position:absolute;left:0;top:50%;margin-top:-1px;width:720px;}

.lingbox ul{zoom:1;margin:0 auto;padding:0;width:720px;height:20px;position:absolute;left:0;top:50%;margin-top:-10px;}

.lingbox ul:after{content:"";display:block;height:0;clear:both;visibility:hidden;}

.lingbox ul li{list-style-type:none;float:left;width:20px;height:20px;border-radius:50%;background:#ccc;margin:0 20px;text-indent:-999em;

}

.lingbox ul li.hover{background:red;}

h1{text-align:center;}

</style>

</head>

<body>

<h1>jquery-Indikator</h1>

<div class="lingbox">

<div class="bg"></div>

<ul>

<li>0</li>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

<li>7</li>

<li>8</li>

<li>9</li>

<li>10</li>

<li>11</li>

</ul>

</div>

</body>

</html>

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn