溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關使用jQuery怎么實現一個老虎機跑動效果，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
jquery是一個簡潔而快速的JavaScript庫，它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件，是繼Prototype之后又一個優秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發網站。
注意需要自行引用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 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>關于使用jQuery怎么實現一個老虎機跑動效果就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
