当前位置: 首页 > 编程笔记 >

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

宁浩博
2023-03-14
本文向大家介绍Jquery实现地铁线路指示灯提示牌效果的方法,包括了Jquery实现地铁线路指示灯提示牌效果的方法的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了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程序设计有所帮助。

 类似资料:
  • 本文向大家介绍jQuery文字提示与图片提示效果实现方法,包括了jQuery文字提示与图片提示效果实现方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery文字提示与图片提示效果实现方法。分享给大家供大家参考,具体如下: 1.效果如图: 2.文字提示代码: 3.图片提示代码: 更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常见经典特效汇总》、《jQuery

  • 本文向大家介绍iOS 实现跑马灯效果的方法示例,包括了iOS 实现跑马灯效果的方法示例的使用技巧和注意事项,需要的朋友参考一下 在网页开发当中跑马灯是常用到的,用来显示通知等,在游戏开发当中也如此。 首先来看看效果图: 接下来就简单看看这效果是怎么实现的。 实现方法 1、首先我们从这个图片里面能联想到如果实现这个效果必然需要使用到动画,或者还有有用scrollView的思路,这里我是用的动画的方式

  • 本文向大家介绍jQuery实现的小图列表,大图展示效果幻灯片示例,包括了jQuery实现的小图列表,大图展示效果幻灯片示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现的小图列表,大图展示效果幻灯片。分享给大家供大家参考,具体如下: 运行效果图如下: 全部代码如下所示: 更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery切换特效与技巧总结》、《jQue

  • 本文向大家介绍jquery实现页面百叶窗走马灯式翻滚显示效果的方法,包括了jquery实现页面百叶窗走马灯式翻滚显示效果的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jquery实现页面百叶窗走马灯式翻滚显示效果的方法。分享给大家供大家参考。具体如下: 1. 这里的代码需要jquery1.3以上的支持,如下所示: 2. 页面可以是这样子 希望本文所述对大家的jQuery程序设计有所

  • 本文向大家介绍JS实现的幻灯片切换显示效果,包括了JS实现的幻灯片切换显示效果的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS实现的幻灯片切换显示效果。分享给大家供大家参考,具体如下: html: js: 效果图如下: 更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScri

  • 这是一颗指示灯。有“亮”和“灭”两种状态。 用法 Your browser does not support the video tag. 案例:小台灯 功能:按下按钮灯亮,松开灯灭