源码参考：源码爱好者--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. WCF服务在高并发情况下报目标积极拒绝的异常处理 z

    http://www.cnblogs.com/kklldog/p/5037006.html wcf的监控服务,偶尔监控到目标服务会报一个目标积极拒绝的错误.一开始以为服务停止了,上服务器检查目标服务好 ...

  2. EventBroker

    Sample publisher Publish an event topic: ? 1 2 3 4 5 6 7 8 9 10 public class Publisher {     [EventP ...

  3. C++中为什么构造函数不能是虚函数，析构函数是虚函数

    一, 什么是虚函数? 简单地说,那些被virtual关键字修饰的成员函数,就是虚函数.虚函数的作用,用专业术语来解释就是实现多态性(Polymorphism),多态性是将接口与实现进行分离:用形象的语 ...

  4. XML通過XSD產生CLASS

    步驟一:通過XML獲取XSD 格式:xsd "XML的完整路徑帶文件名" /O:"輸出路徑不帶文件名". C:\Windows\system32>xsd ...

  5. JSON序列化和反序列化

    public class JSONHelper { public static string Serialize<T>(T obj)//序列化为JSON { System.Runtime. ...

  6. php mssql 中文各种乱码

    1 查询输出时乱码  (SELECT ) 因为MSSQL 数据库一般都是 GBK 编码,所以在php页面中加入 header('Content-Type:text/html; charset=GBK' ...

  7. springmvc笔记(来自慕课网)

    1.准备工作:springmvc相关的jar包. 2.这里我们先用eclipse来操作. 首先看一个接口编程,后面的所有知识点都是通过这个接口编程引出的. OneInterface.java pack ...

  8. springmvc+ajaxFileUpload上传文件(前后台彻底分离的情况下)

    首先是导入jar包: web.xml: <servlet> <servlet-name>mvc-dispatcher</servlet-name> <serv ...

  9. Visual Studio 2015正式版/产品密钥 Win10正式版官方原版ISO镜像下载大全&安装激活教程

    Visual Studio 2015  发行说明: https://visualstudio.com/zh-cn/news/vs2015-vs.aspx Visual Studio  2015 特性简 ...

  10. MS SQL SERVER 数据库日志压缩方法与代码

    MS SQL性能是很不错的,但是数据库用了一段时间之后,数据库却变得很大,实际的数据量不大.一般都是数据库日志引起的!数据库日志的增长可以达到好几百M. DUMP TRANSACTION [数据库名] ...