This article illustrates the method of jquery to realize the effect of metro line indicator sign. Share to everyone for your reference. The specific analysis is as follows:
Often do the subway friends should have observed, that is, the subway when the green led from one direction to another to go back and forth, know that the station to stop the movement, I have been very want to do this effect. Today carefully pondering, finally touched a little clue, and have the effect produced, although there are local optimization, the first code posted. However, there is a problem with the local code of the annotation, to the last index to restart the index 0 start to add color, but after the second execution did not start from index 0, interested friends can improve.
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>jquery Metro line Indicator </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
There is a problem with the code, to the last index to restart the index 0 start to add color, but after the second execution did not start from index 0, now I do not find out where the problem, interested friends can improve.
$ ("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: "";d Isplay: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>
<body>
<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>
I hope this article will help you with your jquery programming.
