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 相关文章推荐
javascript[js]获取url参数的代码
Oct 17 Javascript
用JQUERY增删元素的代码
Feb 14 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
Jun 08 Javascript
javascript检查表单数据是否改变的方法
Jul 30 Javascript
vue.js中mint-ui框架的使用方法
May 12 Javascript
JS实现搜索关键词的智能提示功能
Jul 07 Javascript
Angular开发实践之服务端渲染
Mar 29 Javascript
微信小程序页面缩放式侧滑效果的实现代码
Nov 15 Javascript
JS script脚本中async和defer区别详解
Jun 24 Javascript
Openlayers实现地图的基本操作
Sep 28 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
Nov 09 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
探讨捕获php错误信息方法的详解
2013/06/09 PHP
php导入csv文件碰到乱码问题的解决方法
2014/02/10 PHP
php可生成缩略图的文件上传类实例
2014/12/17 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
学习js所必须要知道的一些
2007/03/07 Javascript
动态调用CSS文件的JS代码
2010/07/29 Javascript
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
ExtJs的Date格式字符代码
2010/12/30 Javascript
javascript模拟地球旋转效果代码实例
2013/12/02 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
使用Bootstrap做一个朝代历史表
2019/12/10 Javascript
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
Python检查ping终端的方法
2019/01/26 Python
关于Python作用域自学总结
2019/06/10 Python
python如何统计代码运行的时长
2019/07/24 Python
python基于plotly实现画饼状图代码实例
2019/12/16 Python
Zavvi美国:英国娱乐之家
2017/03/19 全球购物
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
法国体育用品商店:GO Sport
2019/10/23 全球购物
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
英国拖鞋购买网站:Bedroom Athletics
2020/02/28 全球购物
什么是网络协议
2016/04/07 面试题
庆祝教师节活动方案
2014/01/31 职场文书
后勤服务中心总经理工作职责
2014/03/03 职场文书
幼师小班个人总结
2015/02/12 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
张思德观后感
2015/06/09 职场文书
python实现高效的遗传算法
2021/04/07 Python
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android