Jquery實現(xiàn)地鐵線路指示燈提示牌效果的方法
更新時間：2015年03月02日 12:33:52 作者：站長學院
這篇文章主要介紹了Jquery實現(xiàn)地鐵線路指示燈提示牌效果的方法,實例分析了jQuery動態(tài)顯示特效的使用技巧,需要的朋友可以參考下
本文實例講述了Jquery實現(xiàn)地鐵線路指示燈提示牌效果的方法。分享給大家供大家參考。具體分析如下：
經(jīng)常做地鐵的朋友應該都有所觀察吧，就是地鐵開動的時候那個綠色的指示燈從一個方向到另一個方向一直來回走，知道到站了才停止運動，我一直都很想做這樣的效果。今天細細琢磨下，總算摸到一點頭緒了，并且有效果產(chǎn)生了，雖然還有地方優(yōu)化，先把代碼貼出來。不過，注釋的地方代碼有點問題，到最后一個索引的時候重新重新沖索引0開始添加顏色，但是第二次執(zhí)行后沒有從索引0開始，感興趣的朋友可以完善一下。
復制代碼 代碼如下:
<!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地鐵線路指示燈</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
//代碼有點問題，到最后一個索引的時候重新重新沖索引0開始添加顏色，但是第二次執(zhí)行后沒有從索引0開始，目前我沒有找到問題出在哪里，感興趣的朋友可以完善一下。
$("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指示燈</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>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery地鐵線路指示燈</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
//代碼有點問題，到最后一個索引的時候重新重新沖索引0開始添加顏色，但是第二次執(zhí)行后沒有從索引0開始，目前我沒有找到問題出在哪里，感興趣的朋友可以完善一下。
$("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指示燈</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>
希望本文所述對大家的jQuery程序設計有所幫助。
相關文章
jQuery實現(xiàn)table表格信息的展開和縮小功能示例
這篇文章主要介紹了jQuery實現(xiàn)table表格信息的展開和縮小功能,涉及jQuery事件響應及頁面元素遍歷、屬性修改相關操作技巧,需要的朋友可以參考下2018-07-07
jQuery實現(xiàn)checkbox即點即改批量刪除及中間遇到的坑
這篇文章主要介紹了jQuery實現(xiàn)checkbox即點即改批量刪除及中間遇到的坑,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-11-11
這篇文章主要介紹了jQuery遍歷json的方法,結合實例形式分析了jQuery針對json格式數(shù)據(jù)的遍歷操作相關技巧,需要的朋友可以參考下2016-04-04
這篇文章主要介紹了jQuery中內(nèi)容過濾器簡單用法,結合實例形式分析了jQuery中內(nèi)容過濾器的相關概念、功能、應用場景及相關使用方法,需要的朋友可以參考下2018-03-03
通常為了讓頁面呈現(xiàn)的更為美觀，我們喜歡在奇偶行加上不同的顏色2012-02-02
javascript中對Attr(dom中屬性)的操作示例講解
這篇文章主要是對javascript中對Attr(dom中屬性)的操作進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要介紹了jquery搜索框效果實現(xiàn)方法,分析了jquery搜索框效果的實現(xiàn)技巧及注意事項,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01
下面小編就為大家?guī)硪黄猲oty – jQuery通知插件全面解析。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
EasySlider 基于jQuery功能強大簡單易用的滑動門插件
Easy Slider 是一個滑動門插件，支持任何圖片或內(nèi)容，當點擊時實現(xiàn)橫向或縱向滑動。它擁有一系列豐富的參數(shù)設置，可通過CSS來進行完全的控制。2010-06-06
老生常談jquery中detach()和remove()的區(qū)別
下面小編就為大家?guī)硪黄仙Ｕ刯query中detach()和remove()的區(qū)別。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03