源码参考：源码爱好者--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. UIView之userInteractionEnabled属性介绍

    来源:http://my.oschina.net/hmj/blog/108002 属性作用 该属性值为布尔类型,如属性本身的名称所释,该属性决定UIView是否接受并响应用户的交互. 当值设置为NO后 ...

  2. solr学习之添加文档

    一.开篇语 其实Solr就是一个你可以通过他来查询文档的东西,他整个都是基于Document的,那么这些Document从何而来列?  当然是我们给他,而这些来源就包括了:数据库文件,XML,Json ...

  3. java学习___File类的创建

    一.使用File创建文件 File file = new File("."+File.separator+"data.dat"); //如果不存在则创建 fil ...

  4. [技巧]如何清除VS2008的最近打开项目

    )删除最近打开的文件 运行regedit,打开HKEY_CURRENT_USER\Software\Microsoft\VisualStudio\9.0\FileMRUList 之后,在右边删除相应键 ...

  5. java爬虫实战

    1.下载jxl.jar包,网上多的是 2.编写如下代码: package com.beyond.url; import java.io.BufferedReader;import java.io.Fi ...

  6. Altera SoC 内核更新3.7到3.10

    为什么需要更新呢?其实是为了更好的搭建自己的开发环境,同时熟悉altera对代码的更新和管理方式,便于进一步的熟悉和了解altera SoC开发过程.   1.下载linux代码: git clone ...

  7. Spark1.0源码编译

    编译方式一:mavenexport MAVEN_OPTS="-Xmx2g -XX:MaxPermSize=512M -XX:ReservedCodeCacheSize=512m"m ...

  8. 如何用CSS进行开发

    翻译自:How to Develop with CSS 很多web开发人员都知道CSS,但是他们很可能认为使用CSS的应用代码就是这样的: <p> <span style=" ...

  9. 图之BFS和DFS遍历的实现并解决一次旅游中发现的问题

    这篇文章用来复习使用BFS(Breadth First Search)和DFS(Depth First Search) 并解决一个在旅游时遇到的问题. 关于图的邻接表存储与邻接矩阵的存储,各有优缺点. ...

  10. oracle 大字段clob检索

     select * from tab_name twhere dbms_lob.instr(t.daziduan, 'aaa', 1, 1) > 0;