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 Ajax 异步操作之动态添加节点功能
May 24 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
jQuery HTML css()方法与css类实例详解
May 20 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
PHP通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
jQuery TextBox自动完成条
2009/07/22 Javascript
Javascript的闭包详解
2014/12/26 Javascript
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
Vue中通过Vue.extend动态创建实例的方法
2019/08/13 Javascript
vue实现数字动态翻牌的效果(开箱即用)
2019/12/08 Javascript
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python的面向对象思想分析
2015/01/14 Python
Python_LDA实现方法详解
2017/10/25 Python
Python实现生成随机日期字符串的方法示例
2017/12/25 Python
pandas中去除指定字符的实例
2018/05/18 Python
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
python连接mongodb数据库操作数据示例
2020/11/30 Python
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
乌克兰机票、铁路和巴士票、酒店搜索、保险:Tickets.ua
2020/01/11 全球购物
新大陆软件面试题
2016/11/24 面试题
翻译专业应届生求职信
2013/11/23 职场文书
祖国在我心中演讲稿
2014/01/15 职场文书
销售团队激励口号
2014/06/06 职场文书
兽医医药专业求职信
2014/07/27 职场文书
离婚协议书格式
2014/11/21 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
储备店长岗位职责
2015/04/14 职场文书
网络营销实训总结
2015/08/03 职场文书
幼儿园小班教学反思
2016/03/03 职场文书