当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jQuery实现的老虎机跑动效果示例

jQuery实现的老虎机跑动效果示例

2019年01月07日  | 移动技术网IT编程  | 我要评论

本文实例讲述了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代码运行工具：测试运行上述代码，可得如下运行结果：

更多关于jquery相关内容感兴趣的读者可查看本站专题：《jquery操作dom节点方法总结》、《jquery扩展技巧总结》、《jquery常用插件及用法总结》、《jquery表格(table)操作技巧汇总》、《jquery中ajax用法总结》、《jquery常见经典特效汇总》、《jquery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jquery程序设计有所帮助。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网