快捷導(dǎo)航

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

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

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

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

經(jīng)常做地鐵的朋友應(yīng)該都有所觀察吧，就是地鐵開動的時候那個綠色的指示燈從一個方向到另一個方向一直來回走，知道到站了才停止運動，我一直都很想做這樣的效果。今天細細琢磨下，總算摸到一點頭緒了，并且有效果產(chǎn)生了，雖然還有地方優(yōu)化，先把代碼貼出來。不過，注釋的地方代碼有點問題，到最后一個索引的時候重新重新沖索引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

//代碼有點問題，到最后一個索引的時候重新重新沖索引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>