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程序设计有所帮助。