Jquery动画效果--地铁站名指示等效果

源码参考：源码爱好者--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>
View Code

 

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
 
posted @ 2013-09-25 01:03  潜梦  阅读(848)  评论(0)  编辑  收藏  举报