源码参考：源码爱好者--jQuery仿地铁线路指示灯效果，经修改和美化，特此记录一下。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>jquery Light</title> 6 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 7 <script type="text/javascript"> 8 $(document).ready(function(){ 9 var index=0; 10 setInterval(function(){ 11 $('ul.in li').eq(index++).addClass("hover").siblings().removeClass("hover"); 12 if(index>12){ 13 $('.lightName span').text("站点名"+1); 14 }else{ 15 $('.lightName span').text("站点名"+index); 16 } 17 if(index==13){ 18 index=0; 19 $("ul.in li").eq(index++).addClass("hover").siblings().removeClass("hover"); 20 } 21 },800) 22 23 }) 24 </script> 25 <style type="text/css"> 26 .lightbox{ 27 position:relative; 28 height:30px; 29 padding-top:100px; 30 width:960px; 31 margin:0 auto; 32 } 33 .lightbg{ 34 height:2px; 35 background:red; 36 position:absolute; 37 left:0; 38 top:50%; 39 margin-top:-1px; 40 width:960px; 41 } 42 .lightbox ul.out{ 43 zoom:1; 44 margin:0 auto; 45 padding:0; 46 width:960px; 47 height:20px; 48 position:absolute; 49 left:0; 50 top:50%; 51 margin-top:-20px; 52 } 53 .lightbox ul.in{ 54 zoom:1; 55 margin:0 auto; 56 padding:0; 57 width:9600px; 58 height:20px; 59 position:absolute; 60 left:0; 61 top:50%; 62 margin-top:-15px; 63 } 64 65 .lightbox ul.in li{ 66 list-style-type:none; 67 float:left; 68 width:30px; 69 height:30px; 70 border-radius:100%; 71 background:#69f; 72 margin:0 25px; 73 text-indent:-999em; 74 } 75 .lightbox ul.out li{ 76 list-style-type:none; 77 float:left; 78 width:40px; 79 height:40px; 80 border-radius:100%; 81 background:#ccc; 82 margin:0 20px; 83 text-indent:-999em; 84 } 85 86 .lightbox ul.in li.hover{ 87 background:red; 88 } 89 h1{ 90 text-align:center; 91 } 92 .lightName span{ 93 margin:auto; 94 margin-left:400px; 95 margin-top:30px; 96 font-size:50px; 97 } 98 </style> 99 </head> 100 <body> 101 <h1>jquery Light</h1> 102 <div class="lightbox"> 103 <div class="lightbg"></div> 104 <ul class="out"> 105 <li>0</li> 106 <li>1</li> 107 <li>2</li> 108 <li>3</li> 109 <li>4</li> 110 <li>5</li> 111 <li>6</li> 112 <li>7</li> 113 <li>8</li> 114 <li>9</li> 115 <li>10</li> 116 <li>11</li> 117 </ul> 118 <ul class="in"> 119 <li>0</li> 120 <li>1</li> 121 <li>2</li> 122 <li>3</li> 123 <li>4</li> 124 <li>5</li> 125 <li>6</li> 126 <li>7</li> 127 <li>8</li> 128 <li>9</li> 129 <li>10</li> 130 <li>11</li> 131 </ul> 132 <div class="lightName"> 133 <span></span> 134 </div> 135 </div> 136 </body> 137 </html>
jquery Light
jquery Light
- 0
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 0
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10