源码参考：源码爱好者--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. 01- 使用brew 安装ant －学习笔记（一）

    1.卸载Mac OS下brew工具:ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/mast ...

  2. VB EOF

    源地址: http://zhidao.baidu.com/link?url=zs49D5HzAgoyd3siE44oLbJlVLsWGpf1zqqvXVWZg_ZGXbFY7BgKFDpCqJdANO ...

  3. feedback 是什么意思

    feedback 是什么意思 能否不要说 feedback 呢?  加一个 feedback?  天啊   先解释一下 feedback 是什么  ? 还有   aria-describedby=&q ...

  4. Log4Net IsInfoEnabled 一直 false 的问题

    1.概述log4net是.Net下一个非常优秀的开源日志记录组件.log4net记录日志的功能非常强大.它可以将日志分不同的等级,以不同的格式,输出到不同的媒介.本文主要是介绍如何在VisualStu ...

  5. Ext.Form 自动填写表单内容

    前台: 表单必须含有name属性 if (action == 'edit' || action == 'show') { MyForm1.getForm().load({ url: '/data/cu ...

  6. CCParticleSystem粒子系统

    欢迎转载!转载时请注明出处:http://write.blog.csdn.net/postedit/8124781 第一次接触粒子系统,以前游戏里面的一些小特效,像制作动画一样,是采用一帧一帧的切出来 ...

  7. java流布局管理器

    public class FlowLayoutPosition extends JFrame{    public FlowLayoutPosition()    {        setTitle( ...

  8. document.write('<script type=\"text/javascript\"><\/script>')

    document.write('<script type=\"text/javascript\"><\/script>')

  9. （旧）子数涵数·PS——水杯抠图

    一.首先老规矩,下载所需要的素材. 二.打开Photoshop,并打开已下载好的素材. 三.使用"钢笔工具",快捷键为P,采用"路径"模式,将水杯抠出(例图左上 ...

  10. javascript各种兼容性问题，不断更新

    ie6-ie8 不支持textContent支持innerTextchrome  支持textContent  innerTextfireFox    仅支持textContent不支持innerTe ...