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 相关文章推荐
使用TextRange获取输入框中光标的位
Oct 14 Javascript
JS去除字符串两端空格的简单实例
Dec 27 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
Aug 12 Javascript
JavaScript实现网页截图功能
Oct 16 Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 Javascript
基于AngularJS前端云组件最佳实践
Oct 20 Javascript
js 颜色选择插件
Jan 23 Javascript
js实现各浏览器全屏代码实例
Jul 03 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 Javascript
Vue实现图片与文字混输效果
Dec 04 Javascript
jquery传参及获取方式(两种方式)
Feb 13 jQuery
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
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
自己做矿石收音机
2021/03/02 无线电
PHP新手上路(五)
2006/10/09 PHP
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
PHP使用SWOOLE扩展实现定时同步 MySQL 数据
2017/04/09 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
js转html实体的方法
2016/09/27 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
ES6中Array.includes()函数的用法
2017/09/20 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
python网络编程之数据传输UDP实例分析
2015/05/20 Python
python简单实现计算过期时间的方法
2015/06/09 Python
python创造虚拟环境方法总结
2019/03/04 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
Hunter Boots美国官方网站:赫特威灵顿雨靴
2018/06/16 全球购物
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
仓库门卫岗位职责
2013/12/22 职场文书
《记承天寺夜游》教学反思
2014/02/16 职场文书
2014年财政局工作总结
2014/12/09 职场文书
2014年环保局工作总结
2014/12/11 职场文书
2015高考寄语集锦
2015/02/27 职场文书
演讲开场白和结束语
2015/05/29 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
用Python爬取某乎手机APP数据
2021/06/15 Python
Python 正则模块详情
2021/11/02 Python