源码参考：源码爱好者--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. 利用mysql-proxy 代理无法迁移数据库

    一.什么是数据库迁移? 随着业务的增长或机器老化等原因,不可避免会碰到将数据库从一台机器迁移到另一台机器(集群)的问题.数据库迁移可分为冷迁(离线)和热迁(在线实时). 二.如何无缝迁移? 以旧库 1 ...

  2. SQL查詢數據字典

    SELECT d.name AS 表名 , f.value AS 表说明, 字段序号 = a.colorder , 字段名 = a.name , 标识 THEN '√' ELSE '' END , 主 ...

  3. trim

    这是一个很常见的函数,他的所用是去掉字符序列左边和右边的空格,如字符串str = " ai lafu yo ";str = trim(str); cout << str ...

  4. MYSQL C API : mysql_real_connect()

    MYSQL * mysql_real_connect( MYSQL *mysql, const char *host, const char *user, const char *passwd, co ...

  5. (medium)LeetCode 233.Number of Digit One

    Given an integer n, count the total number of digit 1 appearing in all non-negative integers less th ...

  6. SpringMVC 注解事务

    <bean id="txManager" class="org.springframework.orm.hibernate3.HibernateTransactio ...

  7. V$SGA_RESIZE_OPS.STATUS = ERROR, and MMAN / auto-tuning stops.

    Oracle Server - Standard Edition - Version: 10.2.0.3This problem can occur on any platform. SYMPTOMS ...

  8. java解析xml的4种经典方法

    ========================================== xml文件 <?xml version="1.0" encoding="GB2 ...

  9. Unity3d - RPG项目学习笔记（一）

    通过NGUI和工程素材,学习泰课项目——黑暗之光. 现阶段心得整理: 一.开始界面 开始界面显示顺序为:①白幕渐隐:②镜头拉近:③标题渐显:④按键响应. 1.1 白幕渐隐 NGUI是一个非常强大的插件 ...

  10. FPGA中的时序分析（四）

    常用约束语句说明 关于Fmax      上述是实现Fmax的计算公式,clock skew delay的计算如下图, 就是两个时钟的差值.到头来,影响Fmax的值的大小就是组合逻辑,而Fmax是针对 ...