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插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
jQuery实现手风琴特效
Jan 11 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
声音就能俘获人心,蕾姆,是哪个漂亮小姐姐配音呢?
2020/03/03 日漫
PHP入门学习的几个不错的实例代码
2008/07/13 PHP
简单的PHP缓存设计实现代码
2011/09/30 PHP
PHP四大安全策略
2014/03/12 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
在Linux系统的服务器上隐藏PHP版本号的方法
2015/06/06 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
显示、隐藏密码
2006/07/01 Javascript
javascript[js]获取url参数的代码
2007/10/17 Javascript
jquery 获取表单元素里面的值示例代码
2013/07/28 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
实例解析jQuery工具函数
2016/12/01 Javascript
js中对象与对象创建方法的各种方法
2019/02/27 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
深入分析JavaScript 事件循环(Event Loop)
2020/06/19 Javascript
python 提取文件的小程序
2009/07/29 Python
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
如何使用python切换hosts文件
2020/04/29 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
西班牙宠物用品和食品网上商店:Tiendanimal
2019/06/06 全球购物
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
幼儿园感恩节活动总结
2015/03/24 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis
vue项目支付功能代码详解
2022/02/18 Vue.js