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中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
jQuery实现验证用户登录
Dec 10 jQuery
jquery实现吸顶导航效果
Jan 08 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
在Windows版的PHP中使用ADO
2006/10/09 PHP
Ajax PHP简单入门教程代码
2008/04/25 PHP
PHP 程序员也要学会使用“异常”
2009/06/16 PHP
php empty函数判断mysql表单是否为空
2010/04/12 PHP
php 带逗号千位符数字的处理方法
2012/01/10 PHP
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
2010/04/15 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
原生js实现自定义滚动条
2021/01/20 Javascript
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
python自然语言编码转换模块codecs介绍
2015/04/08 Python
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
详解python中的 is 操作符
2017/12/26 Python
python实现向微信用户发送每日一句 python实现微信聊天机器人
2019/03/27 Python
24式加速你的Python(小结)
2019/06/13 Python
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
平安校园建设方案
2014/05/02 职场文书
2014高考励志标语
2014/06/05 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
教师思想工作总结2015
2015/05/13 职场文书
厉行节约工作总结
2015/08/12 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang
Node-Red实现MySQL数据库连接的方法
2021/08/07 MySQL
Python超详细分步解析随机漫步
2022/03/17 Python
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android