源码参考：源码爱好者--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动画效果--地铁站名指示等效果的更多相关文章

  1. js进阶 13-2 jquery动画滑动效果哪些注意事项

    js进阶 13-2 jquery动画滑动效果哪些注意事项 一.总结 一句话总结:滑动里面这里up是隐藏,down是显示. 1.jquery动画默认的两个切换效果是什么(swing默认和linear的区 ...

  2. jQuery操作标签，jQuery事件操作，jQuery动画效果，前端框架

    jQuery操作标签 jQuery代码查找标签绑定的变量名推荐使用 $xxxEle 样式类操作 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类 ...

  3. JQuery动画效果

    jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...

  4. jquery 动画效果插件

    从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...

  5. jquery动画效果---animate()--滚屏

    jquery动画效果---animate()方法---W3school

  6. 40个超酷的jQuery动画效果教程

    自从出现,jQuery就在web领域就引起了轰动,现在它已经成为Web动画效果的最佳解决方案之一.jQuery提供了良好的交叉浏览器支持,并且轻便易用.现在,jQuery在定义和控制小型的Web动画诸 ...

  7. jQuery自学笔记（三）：jQuery动画效果

    jQuery隐藏和显示: 使用 hide( ) 和 show( ) 方法来隐藏和显示 HTML 元素: 语法: $(selector).hide(speed,callback); $(selector ...

  8. python 全栈开发，Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

    js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...

  9. jquery 动画总结（主要指效果函数）

    动画无非两类:帧动画frame和变形动画tween,以及3d动画.不论web还是安卓苹果app,动画原理都是这些. web app 动画实现的途径,无非这几种:1 gif动画---这就是帧动画,把若干 ...

随机推荐

  1. WebService 超简单入门教程(Java)

    写在前面的话: 当两个人碰面后,产生了好感,如果需要得到双方的信息,那么双方的交流是必不可少的!应用程序也如此, 各个应用程序之间的交流就需要WebService来作为相互交流的桥梁! 项目目的: 程 ...

  2. git的忽略文件和删除文件操作

    1 删除工作区和暂存去的a文件$ git rm a 2只删除暂存去的 a文件,a文件就不被跟踪了.可以执行git add a从新添加回暂存去$ git rm --cached a 3 git mv 操 ...

  3. JDBC中的事务-Transaction

    事务-Transaction 某些情况下我们希望对数据库的某一操作要么整体成功,要么整体失败,经典的例子就是支付宝提现.例如我们发起了支付宝到银行卡的100元提现申请,我们希望的结果是支付宝余额减少1 ...

  4. [kuangbin带你飞]专题十四 数论基础

            ID Origin Title   111 / 423 Problem A LightOJ 1370 Bi-shoe and Phi-shoe   21 / 74 Problem B ...

  5. UI_RD协作开发流程

    1. 背景 由于android端需要进行多屏幕适配,这就给UI&RD之间的沟通产生了一些困难.我下面将会对这两种角色的沟通,说明了一下我们项目中沟通的方式和规则. 原则:客户端跟UI约定了各种 ...

  6. gnu c语言中的?:的作用

    #include <stdio.h> #include <stdlib.h> char * test() { return "abc" ?: "f ...

  7. that-annoying-insert-problem-getting-data-into-the-db-using-dapper

    http://samsaffron.com/archive/2012/01/16/that-annoying-insert-problem-getting-data-into-the-db-using ...

  8. python连mysql时避免出现乱码

    使用python连mysql时候,常常出现乱码,采取以下措施可以避免 1 Python文件设置编码 utf-8 (文件前面加上 #encoding=utf-8)2 MySQL数据库charset=ut ...

  9. Linux-wget/tar/ln 函数

    1. 获取软件包,可以使用wget的方式, ubuntu可以使用apt-get source来获取源代码 wget 是一个在网络上进行下载的简单而强大的自由软件,支持HTTP,HTTPS,FTP协议, ...

  10. Java 获取*.properties配置文件中的内容 ，常见的两种方法

    import java.io.InputStream; import java.util.Enumeration; import java.util.List; import java.util.Pr ...