快捷導(dǎo)航

Jquery實(shí)現(xiàn)地鐵線路指示燈提示牌效果的方法

更新時(shí)間：2015年03月02日 12:33:52 作者：站長學(xué)院

這篇文章主要介紹了Jquery實(shí)現(xiàn)地鐵線路指示燈提示牌效果的方法,實(shí)例分析了jQuery動(dòng)態(tài)顯示特效的使用技巧,需要的朋友可以參考下

本文實(shí)例講述了Jquery實(shí)現(xiàn)地鐵線路指示燈提示牌效果的方法。分享給大家供大家參考。具體分析如下：

經(jīng)常做地鐵的朋友應(yīng)該都有所觀察吧，就是地鐵開動(dòng)的時(shí)候那個(gè)綠色的指示燈從一個(gè)方向到另一個(gè)方向一直來回走，知道到站了才停止運(yùn)動(dòng)，我一直都很想做這樣的效果。今天細(xì)細(xì)琢磨下，總算摸到一點(diǎn)頭緒了，并且有效果產(chǎn)生了，雖然還有地方優(yōu)化，先把代碼貼出來。不過，注釋的地方代碼有點(diǎn)問題，到最后一個(gè)索引的時(shí)候重新重新沖索引0開始添加顏色，但是第二次執(zhí)行后沒有從索引0開始，感興趣的朋友可以完善一下。

復(fù)制代碼代碼如下:

<!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

//代碼有點(diǎn)問題，到最后一個(gè)索引的時(shí)候重新重新沖索引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>