jQuery实现的老虎机跑动效果示例
更新时间：2018年12月29日 09:21:10 作者：csmzl
这篇文章主要介绍了jQuery实现的老虎机跑动效果,涉及jQuery事件响应以及结合时间函数动态操作页面元素相关实现技巧,需要的朋友可以参考下
本文实例讲述了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.jb51.net/code/HtmlJsRun测试运行上述代码，可得如下运行结果：
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery操作DOM节点方法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
这篇文章主要为大家详细介绍了jquery实现拖拽小方块效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
在项目开发过程中，经常会遇到带有弹窗的页面，尤其是在移动端。下面通过本文给大家分享jQuery实现弹窗下底部页面禁止滑动效果，需要的朋友参考下吧2017-12-12
节点的删除在应用中比较常见，如何动态删除某一节点来实现某一特殊效果，下面有个不错的示例，希望对大家有所帮助2014-01-01
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
这篇文章主要介绍了jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法,需要的朋友可以参考下2017-12-12
最近做项目时碰到一个需求，就是在移动端支付页面点击支付按钮弹出一个支付键盘，类似于支付宝的那种。项目只是单纯的手机网站，所以这个功能由前端来实现，下面小编给大家带来了jQuery仿移动端支付宝键盘的实现代码，需要的朋友参考下吧2018-08-08
在本例中，我们会通过jQuery实现单击将一个文本信息变为可编辑的表单，你可以对文本内容进行编辑，然后点击“确定”按钮，新的内容将发送到后台PHP程序处理，并保存到数据库；当点击“取消”按钮，则页面恢复到初始状态，需要的朋友可以参考下2015-10-10
新浪网易的评论块制作 因为 textarea里面不能放图片，所以和新浪的做法一样，选用iframe放内容，然后隐藏一个 textarea用于提交。2010-07-07
最近，有需要做一个动态的给table，添加行，用了点时间，算是做成了。已测试过，但如果发现有什么bug，可以留言，欢迎拍砖。大家一起进步。2011-03-03
本文主要介绍了jQuery中取消后续执行内容的实例，代码通俗易懂。需要的朋友来看下吧2016-12-12
jQuery 美元符冲突的解决方法，使用jquery与别的js库共同使用的时候需要注意的地方。2010-03-03
最新评论