jQuery实现的*跑动效果示例
程序员文章站
2022-11-22 12:05:14
本文实例讲述了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程序设计有所帮助。