Jquery动画效果--地铁站名指示等效果
源码参考：源码爱好者--jQuery仿地铁线路指示灯效果，经修改和美化，特此记录一下。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>jquery Light</title>
6 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
7 <script type="text/javascript">
8 $(document).ready(function(){
9 var index=0;
10 setInterval(function(){
11 $('ul.in li').eq(index++).addClass("hover").siblings().removeClass("hover");
12 if(index>12){
13 $('.lightName span').text("站点名"+1);
14 }else{
15 $('.lightName span').text("站点名"+index);
16 }
17 if(index==13){
18 index=0;
19 $("ul.in li").eq(index++).addClass("hover").siblings().removeClass("hover");
20 }
21 },800)
22
23 })
24 </script>
25 <style type="text/css">
26 .lightbox{ 27 position:relative;
28 height:30px;
29 padding-top:100px;
30 width:960px;
31 margin:0 auto;
32 }
33 .lightbg{ 34 height:2px;
35 background:red;
36 position:absolute;
37 left:0;
38 top:50%;
39 margin-top:-1px;
40 width:960px;
41 }
42 .lightbox ul.out{ 43 zoom:1;
44 margin:0 auto;
45 padding:0;
46 width:960px;
47 height:20px;
48 position:absolute;
49 left:0;
50 top:50%;
51 margin-top:-20px;
52 }
53 .lightbox ul.in{ 54 zoom:1;
55 margin:0 auto;
56 padding:0;
57 width:9600px;
58 height:20px;
59 position:absolute;
60 left:0;
61 top:50%;
62 margin-top:-15px;
63 }
64
65 .lightbox ul.in li{ 66 list-style-type:none;
67 float:left;
68 width:30px;
69 height:30px;
70 border-radius:100%;
71 background:#69f;
72 margin:0 25px;
73 text-indent:-999em;
74 }
75 .lightbox ul.out li{ 76 list-style-type:none;
77 float:left;
78 width:40px;
79 height:40px;
80 border-radius:100%;
81 background:#ccc;
82 margin:0 20px;
83 text-indent:-999em;
84 }
85
86 .lightbox ul.in li.hover{ 87 background:red;
88 }
89 h1{ 90 text-align:center;
91 }
92 .lightName span{ 93 margin:auto;
94 margin-left:400px;
95 margin-top:30px;
96 font-size:50px;
97 }
98 </style>
99 </head>
100 <body>
101 <h1>jquery Light</h1>
102 <div class="lightbox">
103 <div class="lightbg"></div>
104 <ul class="out">
105 <li>0</li>
106 <li>1</li>
107 <li>2</li>
108 <li>3</li>
109 <li>4</li>
110 <li>5</li>
111 <li>6</li>
112 <li>7</li>
113 <li>8</li>
114 <li>9</li>
115 <li>10</li>
116 <li>11</li>
117 </ul>
118 <ul class="in">
119 <li>0</li>
120 <li>1</li>
121 <li>2</li>
122 <li>3</li>
123 <li>4</li>
124 <li>5</li>
125 <li>6</li>
126 <li>7</li>
127 <li>8</li>
128 <li>9</li>
129 <li>10</li>
130 <li>11</li>
131 </ul>
132 <div class="lightName">
133 <span></span>
134 </div>
135 </div>
136 </body>
137 </html>View Code
jquery Light
jquery Light
- 0
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 0
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
转载于:https://www.cnblogs.com/m199/p/3337938.html
Jquery动画效果--地铁站名指示等效果相关推荐
- jquery动画效果 animate() 自定义动画 stop() 停止运行动画 fadeIn()/fadeOut()/fadeTo() 淡入淡出
jquery动画效果 今天给大家介绍一下jQuery当中的几种动画效果. . animate() 自定义动画 stop() 停止运行动画 fadeIn()/fadeOut()/fadeTo() 淡入淡 ...
- js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
- jQuery 动画效果
1.基本效果 (1)隐藏 hide() hide(speed [,callback]) (2)显示 show() show(speed [,callback]) (3)交替显示隐藏 toggle() ...
- jquery 动画总结（主要指效果函数）
动画无非两类:帧动画frame和变形动画tween,以及3d动画.不论web还是安卓苹果app,动画原理都是这些. web app 动画实现的途径,无非这几种: 1 gif动画---这就是帧动画,把若 ...
- jQuery动画效果之上卷下拉
jQuery动画效果之上卷下拉 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 开发工具与关键技术:Vis ...
- jQuery动画与效果
jQuery动画与效果 1 显示与隐藏元素 1.1 显示元素 1.2 隐藏元素 1.3 交替显示元素 2 滑动效果 2.1 向上收缩效果 2.2 向下展开效果 2.3 交替伸缩元素 3 淡入淡出效果 ...
- html的动画效果实现无限轮播,jQuery动画效果实现图片无缝连续滚动
本文实例介绍了jQuery动画效果实现图片无缝连续滚动的详细代码,分享给大家供大家参考,具体内容如下 效果图如下: 一.HTML代码 1. id为container的div是最外层的包装,用来控制滚动 ...
- 前端三件套系例之JQuery——JQuery动画效果、JQuery插件、
文章目录 1 JQuery动画效果 1. 基本效果 2. 滑动效果 3 淡入淡出效果 4 自定义动画 5 动画控制 6 设置 7 事件 7-1 常用事件 7-2 事件绑定 7-3 移除事件 7-4 阻 ...
- JavaScript - jQuery动画效果
trigger:触发v.触发器n toggle:触发器.开关n [ jQuery动画结束时的回调函数 ] .hide(1000,function(){alert("123"); } ...
最新文章
- 针对测试行业，新人的一些建议：我适合做测试吗？
- 如何在Jetty中使用SPDY
- 关于自动布局更新约束方法的总结
- t3 深入Tornado
- Docker学习文档之二 搭建环境-Linux环境
- matlab gui编写计算器,怎样用MATLAB中的GUI做一个简单计算器
- EasyRecovery如何恢复CMake项目文件
- 台式计算机开机不自检不起动,台式机开机一直自检的解决方法
- iOS-底层原理 19：KVC探索
- EL表达式和JSTL标签库学习笔记
- Flex语法和常用鼠标手势
- 去除图片链接边框及其链接虚线
- Hadoop | Stom
- 天涯明月刀手游模拟器哪个好？天涯明月刀手游PC电脑版教程
- 查询app android版本,企业名录查询APP
- 国云数据马晓东：数字技术重构人力资源
- 3 移动机器人路径规划（5- DWA路径规划算法）
- 信息安全管理（CISP）—— 部分重点内容总结
- K8s基础12——etcd数据备份与恢复、集群版本升级、网络策略
- 博士申请 | 厦门大学信息学院郭诗辉老师团队招收全奖博士/博后/实习生