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实现提示语淡入效果
May 05 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 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安全技术之 实现php基本安全
2010/09/04 PHP
PHP中执行cmd命令的方法
2014/10/11 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
firefo xml 读写实现js代码
2009/06/11 Javascript
jQuery 技巧小结
2010/04/02 Javascript
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
JavaScript地图拖动功能SpryMap的简单实现
2013/07/17 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
基于jquery编写分页插件
2016/03/07 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
jQuery实现的简单手风琴效果示例
2018/08/29 jQuery
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
Python 闭包的使用方法
2017/09/07 Python
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
C++面试题目
2013/06/25 面试题
文秘专业自荐信
2013/10/14 职场文书
自我评价优秀范文分享
2013/11/30 职场文书
校三好学生主要事迹
2014/01/11 职场文书
平面设计求职信
2014/03/10 职场文书
村创先争优活动总结
2014/08/28 职场文书
城市轨道交通工程职业生涯规划书范文
2014/09/16 职场文书
成都人事代理协议书
2014/10/25 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书
解析redis hash应用场景和常用命令
2021/08/04 Redis