How to Use Jquery to display indicator lights of subway lines
This article mainly introduces Jquery's method for implementing the indicator board effects of subway lines. The example shows how to use jQuery's dynamic display special effects. For more information, see
This article describes how Jquery achieves the indicator card effect on subway lines. Share it with you for your reference. The specific analysis is as follows:
When the subway is started, the green indicator lights go back and forth from one direction to the other. When the subway is started, the green indicator lights stop moving, I always want to do this. Today, I have learned a little bit about it, and the results have been produced. Although there are some optimizations, I will post the code first. However, the Code of the annotation is a bit problematic. At the time of the last index, the color is re-written to index 0 to add the color. However, after the second execution, the index 0 does not start, if you are interested, you can complete it.
The Code is as follows:
<! 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>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> jquery metro line indicator light </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
// The code is a bit problematic. At the end of the last index, the color is re-written to index 0 and the color is added. However, after the second execution, the color does not start from index 0. Currently, I have not found the problem, if you are interested, you can complete it.
$ ("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 indicator light <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>
I hope this article will help you with jQuery programming.