小程序开发价格_jQuery完成的山君机跑动效果示例

jQuery实现的老虎机跑动效果示例       这篇文章主要介绍了jQuery实现的老虎机跑动效果,涉及jQuery事件响应以及结合时间函数动态操作页面元素相关实现技巧,需要的朋友可以参考下

本文实例讲述了jQuery实现的老虎机跑动效果。分享给大家供大家参考，具体如下：

老虎机的跑动效果

注意需要自行引用jquery库

 !DOCTYPE html 
 html 
 head 
 meta charset="UTF-8" 
 title 老虎机 /title 
 script src="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 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" 
 /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程序设计有所帮助。