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 相关文章推荐
JS实现随机化快速排序的实例代码
Aug 01 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
Ajax提交与传统表单提交的区别说明
Feb 07 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
JavaScript的事件代理和委托实例分析
Mar 25 Javascript
通过JS判断联网类型和连接状态的实现代码
Apr 01 Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
Bootstrap面板学习使用
Feb 09 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
JavaScript之filter_动力节点Java学院整理
Jun 28 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
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
PHP getName()函数讲解
2019/02/03 PHP
PHP7内核CGI与FastCGI详解
2019/04/14 PHP
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
html向js方法传递参数具体实现
2013/08/08 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
window.showModalDialog()返回值的学习心得总结
2014/01/07 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
js操作table中tr的顺序实现上移下移一行的效果
2018/11/22 Javascript
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
[00:14]护身甲盾
2019/03/06 DOTA
pyqt5 实现 下拉菜单 + 打开文件的示例代码
2019/06/20 Python
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
Python实现直播推流效果
2019/11/26 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
在html页面中取得session中的值的方法
2020/08/11 HTML / CSS
同程旅游英文网站:LY.com
2018/11/13 全球购物
益模软件Java笔试题
2012/03/27 面试题
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
七夕相亲活动策划方案
2014/08/31 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
七年级之开学家长寄语35句
2019/09/05 职场文书
react国际化react-intl的使用
2021/05/06 Javascript
SQLServer之常用函数总结详解
2021/08/30 SQL Server
win10电脑双屏显示一个黑屏怎么办?win10电脑双屏显示一个黑屏解决方法
2022/07/15 数码科技