Jquery实现地铁线路指示灯提示牌效果的方法


Posted in Javascript onMarch 02, 2015

本文实例讲述了Jquery实现地铁线路指示灯提示牌效果的方法。分享给大家供大家参考。具体分析如下:

经常做地铁的朋友应该都有所观察吧,就是地铁开动的时候那个绿色的指示灯从一个方向到另一个方向一直来回走,知道到站了才停止运动,我一直都很想做这样的效果。今天细细琢磨下,总算摸到一点头绪了,并且有效果产生了,虽然还有地方优化,先把代码贴出来。不过,注释的地方代码有点问题,到最后一个索引的时候重新重新冲索引0开始添加颜色,但是第二次执行后没有从索引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开始添加颜色,但是第二次执行后没有从索引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程序设计有所帮助。

Javascript 相关文章推荐
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
文本框input聚焦失焦样式实现代码
Oct 12 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 Javascript
文本域光标操作的jQuery扩展分享
Mar 10 Javascript
js实现简单的购物车有图有代码
May 26 Javascript
让浏览器DOM元素最后加载的js方法
Jul 29 Javascript
JavaScript实现列出数组中最长的连续数
Dec 29 Javascript
JQuery手速测试小游戏实现思路详解
Sep 20 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 Javascript
JavaScript闭包原理与用法学习笔记
May 29 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 #Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
Mar 02 #Javascript
JavaScript定时显示广告代码分享
Mar 02 #Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
Mar 02 #Javascript
js实现横向百叶窗效果网页切换动画效果的方法
Mar 02 #Javascript
js实现从中间开始往上下展开网页窗口的方法
Mar 02 #Javascript
Javascript无参数和有参数类继承问题解决方法
Mar 02 #Javascript
You might like
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
php安全配置 如何配置使其更安全
2011/12/16 PHP
用PHP的socket实现客户端到服务端的通信实例详解
2017/02/04 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
JavaScript中Window对象的属性及事件
2015/12/25 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
2017/01/19 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
2017/06/12 jQuery
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
vue数据响应式原理知识点总结
2020/02/16 Javascript
Vue Router中应用中间件的方法
2020/08/06 Javascript
简单的python后台管理程序
2017/04/13 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
python pandas 如何替换某列的一个值
2018/06/09 Python
Python二叉树的镜像转换实现方法示例
2019/03/06 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
python动态视频下载器的实现方法
2019/09/16 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
django model通过字典更新数据实例
2020/04/01 Python
python Paramiko使用示例
2020/09/21 Python
用css3实现当鼠标移进去时当前亮其他变灰效果
2014/04/08 HTML / CSS
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
网络体系结构及协议的定义
2014/03/13 面试题
大学生创业项目方案
2014/03/08 职场文书
法定代表人身份证明书(含说明)
2014/10/02 职场文书
2014年共青团工作总结
2014/12/10 职场文书
财务工作失误检讨书
2015/02/19 职场文书