Jquery动画效果--地铁站名指示等效果
源码参考：源码爱好者--jQuery仿地铁线路指示灯效果，经修改和美化，特此记录一下。
<!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 Light</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var index=0;
setInterval(function(){
$('ul.in li').eq(index++).addClass("hover").siblings().removeClass("hover");
if(index>12){
$('.lightName span').text("站点名"+1);
}else{
$('.lightName span').text("站点名"+index);
}
if(index==13){
index=0;
$("ul.in li").eq(index++).addClass("hover").siblings().removeClass("hover");
}
},800) })
</script>
<style type="text/css">
.lightbox{
position:relative;
height:30px;
padding-top:100px;
width:960px;
margin:0 auto;
}
.lightbg{
height:2px;
background:red;
position:absolute;
left:0;
top:50%;
margin-top:-1px;
width:960px;
}
.lightbox ul.out{
zoom:1;
margin:0 auto;
padding:0;
width:960px;
height:20px;
position:absolute;
left:0;
top:50%;
margin-top:-20px;
}
.lightbox ul.in{
zoom:1;
margin:0 auto;
padding:0;
width:9600px;
height:20px;
position:absolute;
left:0;
top:50%;
margin-top:-15px;
} .lightbox ul.in li{
list-style-type:none;
float:left;
width:30px;
height:30px;
border-radius:100%;
background:#69f;
margin:0 25px;
text-indent:-999em;
}
.lightbox ul.out li{
list-style-type:none;
float:left;
width:40px;
height:40px;
border-radius:100%;
background:#ccc;
margin:0 20px;
text-indent:-999em;
} .lightbox ul.in li.hover{
background:red;
}
h1{
text-align:center;
}
.lightName span{
margin:auto;
margin-left:400px;
margin-top:30px;
font-size:50px;
}
</style>
</head>
<body>
<h1>jquery Light</h1>
<div class="lightbox">
<div class="lightbg"></div>
<ul class="out">
<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>
<ul class="in">
<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 class="lightName">
<span></span>
</div>
</div>
</body>
</html>
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
Jquery动画效果--地铁站名指示等效果的更多相关文章
- js进阶 13-2 jquery动画滑动效果哪些注意事项
js进阶 13-2 jquery动画滑动效果哪些注意事项 一.总结 一句话总结:滑动里面这里up是隐藏,down是显示. 1.jquery动画默认的两个切换效果是什么(swing默认和linear的区 ...
- jQuery操作标签，jQuery事件操作，jQuery动画效果，前端框架
jQuery操作标签 jQuery代码查找标签绑定的变量名推荐使用 $xxxEle 样式类操作 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类 ...
- JQuery动画效果
jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...
- jquery 动画效果插件
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...
- jquery动画效果---animate()--滚屏
jquery动画效果---animate()方法---W3school
- 40个超酷的jQuery动画效果教程
自从出现,jQuery就在web领域就引起了轰动,现在它已经成为Web动画效果的最佳解决方案之一.jQuery提供了良好的交叉浏览器支持,并且轻便易用.现在,jQuery在定义和控制小型的Web动画诸 ...
- jQuery自学笔记（三）：jQuery动画效果
jQuery隐藏和显示: 使用 hide( ) 和 show( ) 方法来隐藏和显示 HTML 元素: 语法: $(selector).hide(speed,callback); $(selector ...
- python 全栈开发，Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)
js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...
- jquery 动画总结（主要指效果函数）
动画无非两类:帧动画frame和变形动画tween,以及3d动画.不论web还是安卓苹果app,动画原理都是这些. web app 动画实现的途径,无非这几种:1 gif动画---这就是帧动画,把若干 ...
随机推荐
- Win7允许被ping
我们可以通过命令行方式来执行入站 Ping 的规则是启用还是禁用,命令行如下: netsh firewall set icmpsetting 8 netsh firewall set icmpsett ...
- java小程序
1.水仙花数 这个数等于它的每位数的立方和 (三位数) 示例一: int i; int j; int k; for (i=1;i<=9;i++) { for (j=0;j<=9;j++){ ...
- [Flex] ButtonBar系列——flex3 ButtonBar圆角菜单的运用
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="h ...
- .NET连接池的配置 【转】
ADO.Net 在数据库操作过程中默认打开了连接池,不需要再进行手工配置.这个特性可以使数据库操作时效率提高,但也要有相应的代码配合,才能真正提高程序效率. 1.连接字符串 ADO.Net 中的连接池 ...
- 范式(Oracle)
三范式 ------------数据库的三范式-------------- (1).要有主键,列不可分 (2).不能存在部分依赖:当有多个字段联合起来作为主键的时候,不是主键的字段不能部分依赖于主键中 ...
- ormlite性能对比
看了一下现在的android设备,性能都不差,就懒得直接用sqlite,直接上ORM框架把,上网搜了一圈,觉得androrm, ormlite 这两个不错,当然,还有点别的,这里就不多做介绍,竟然说明 ...
- Esfog_UnityShader教程_漫反射DiffuseReflection
这篇是系列教程的第三篇,最近工作比较紧,所以这个周六周日就自觉去加了刚回来就打开电脑补上这篇,这个系列的教程我会尽量至少保证一周写一篇的.如果大家看过我的上一篇教程<Esfog_UnitySha ...
- oracle 内存结构 share pool sql解析的过程
1.sql解析的过程 oracle首先将SQL文本转化为ASCII字符,然后根据hash函数计算其对应的hash值(hash_value).根据计算出的hash值到library cache中找到对应 ...
- Android开发-Hello World+phonegap（Cordova）
想着把IOS的程序在Android上实现一下,尝试Android开发,结果发现Android的开发环境也不好弄.接下来记录下整个过程,耳熟能详的操作就不再赘述,重点记录个人特别的经历: 一.安装jav ...
- Eclipse Gtk+
From: http://hi.baidu.com/spmno/item/9425018707f295dfd1f8cdbe 1. Project->Properties,然后选 C/C++ Bu ...