jQuery实现的老虎机跑动效果示例


Posted in jQuery onDecember 29, 2018

本文实例讲述了jQuery实现的老虎机跑动效果。分享给大家供大家参考,具体如下:

老虎机的跑动效果

注意需要自行引用jquery库

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>老虎机</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style type="text/css">
      #bigDiv div{
        height:50px;
        width:50px;
        float:left;
        background-color:red;
        margin-left:5px;
        visibility: hidden;
      }
      #bigDiv p{
        margin-left: 10px;
      }
    </style>
  </head>
  <body>
    <div align="center">
      <div style="display: inline-block;" id = bigDiv>
        <div><p>西瓜</p></div>
        <div><p>苹果</p></div>
        <div><p>香蕉</p></div>
        <div><p>橘子</p></div>
        <div><p>梨子</p></div>
        <div><p>哈密瓜</p></div>
        <div><p>草莓</p></div>
        <div><p>水蜜桃</p></div>
        <div><p>橙子</p></div>
        <div><p>谢谢</p></div>
      </div>
      <br/><br/><br/><br/>
      <input type="button" id="autoBtn" value="Auto" onclick="autoStop()">
    </div>
    <script language="javascript">
      var allDiv = $("#bigDiv").find("div");
      var t;
      var tCicrl = 30;
      var c = 0;
      function autoStop(){
        var index = 11;//11取值范围是大于已有选项项数
        $(allDiv).each(function(i){
          if($(this).css("visibility")!="hidden"){
            index = i;
          }
        });
        if(index == 11){
          index = parseInt(9*Math.random());
        }
        $(allDiv).eq(index).css("visibility","visible");
        setTimeout(function(){slotRun(index);},50);
      }
      function slotRun(index){
        if(c<150){
          if($(allDiv).eq(index).css("visibility")!="hidden")
          {
            $(allDiv).eq(index).css("visibility","hidden");
            if(index==9){
              //clearTimeout(t);
              $(allDiv).eq(0).css("visibility","visible");
              t = setTimeout(function(){slotRun(0)},tCicrl++);
            }else{
              //clearTimeout(t);
              $(allDiv).eq(index+1).css("visibility","visible");
              t = setTimeout(function(){slotRun(++index)},tCicrl++);
            }
            c++;
          }
        }else{
          clearTimeout(t);
          tCicrl = 30;
          c = 0;
        }
      }
    </script>
  </body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试运行上述代码,可得如下运行结果:

jQuery实现的老虎机跑动效果示例

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
jQuery extend()详解及简单实例
May 06 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
jQuery实现推拉门效果
Oct 19 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 #jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 #jQuery
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 #jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 #jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 #jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 #jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 #jQuery
You might like
Phpbean路由转发的php代码
2008/01/10 PHP
pdo中使用参数化查询sql
2011/08/11 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
8个必备的PHP功能实例代码
2013/10/27 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
js类中的公有变量和私有变量
2008/07/24 Javascript
Javascript var变量隐式声明方法
2009/10/19 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
一个JavaScript的求爱小特效
2014/05/09 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
深入理解js generator数据类型
2016/08/16 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
原生JavaScript实现幻灯片效果
2021/02/19 Javascript
Python OpenCV处理图像之滤镜和图像运算
2018/07/10 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
Django 实现xadmin后台菜单改为中文
2019/11/15 Python
Python 复平面绘图实例
2019/11/21 Python
Python chardet库识别编码原理解析
2020/02/18 Python
python实现udp聊天窗口
2020/03/31 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
小学生自我评价范例
2013/09/24 职场文书
2014年迎新年活动方案
2014/02/19 职场文书
教师教学评估方案
2014/05/09 职场文书
爬山的活动方案
2014/08/16 职场文书
党员群众路线对照检查材料
2014/08/31 职场文书
教研活动主持词
2015/07/03 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
2019学校运动会开幕词
2019/05/13 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL