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简介_动力节点Java学院整理
Jul 04 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
jQuery轮播图功能制作方法详解
Dec 03 jQuery
jquery实现图片放大镜效果
Dec 23 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
ThinkPHP使用Smarty第三方插件方法小结
2016/03/19 PHP
[原创]php简单防盗链验证实现方法
2016/07/09 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
JS 事件机制完整示例分析
2020/01/15 Javascript
Vue使用axios引起的后台session不同操作
2020/08/14 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
原生JS运动实现轮播图
2021/01/02 Javascript
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
在Python的Django框架中用流响应生成CSV文件的教程
2015/05/02 Python
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
python利用装饰器进行运算的实例分析
2015/08/04 Python
Python基础篇之初识Python必看攻略
2016/06/23 Python
Python 监测文件是否更新的方法
2019/06/10 Python
python tkinter之顶层菜单、弹出菜单实例
2020/03/04 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
员工自我鉴定范文
2013/10/06 职场文书
电大物流学生的自我评价
2013/10/25 职场文书
大学新生军训感言
2014/02/25 职场文书
小学生元旦感言
2014/02/26 职场文书
高三学习决心书
2014/03/11 职场文书
承诺书的格式范文
2014/03/28 职场文书
运动会方阵口号
2014/06/07 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
计算机教师工作总结
2015/08/13 职场文书
学校体育节班级口号
2015/12/25 职场文书