<menuitem id="te8vo"></menuitem>
  • <div id="te8vo"><tr id="te8vo"><object id="te8vo"></object></tr></div>
  • <dl id="te8vo"></dl>
  • 頭像

    jQuery夾娃娃機器抽獎游戲代碼

    來源:http://www.bdtes.com/js/4227.html 18***38 2019-03-02 11:28瀏覽(154) 收藏

    一款簡單的jQuery夾娃娃機器抽獎游戲代碼,看準時機按下開始按鈕夾起布娃娃公仔。
    jQuery夾娃娃機器抽獎游戲代碼
    分類:抽獎 > 抽獎 難易:初級

    程序員,你不是一個人;網站開發QQ群:35248186,在線充值,或聯系QQ2589223951直接充值

    查看演示 下載資源: 6 下載資源 下載積分: 20 積分

    js代碼

    <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript">
        	var toys = new Array();//娃娃數組
        	var flag = true;//按鈕默認可以點擊
        	$("#start_btn").click(function(){
        		if(!flag){
        			alert("不要連續點擊,等夾完一次再夾");
        			return;
        		}
        		flag = false;//剛剛被點擊完,按鈕不能連續點擊
        		//改變按鈕的位置
        		$("#start_btn").css({"backgroundPosition":"-40px -160px"});
        		//動畫將繩子往下移動到200像素
        		$("#rod").animate({height:"300px"},1500,"linear",function(){
        			//當動畫結束的時候,將爪子合起來
        			$("#hand").css({"backgroundPosition":"0px 0px","width":"124px"});
        			$("#start_btn").css({"backgroundPosition":"-40px -20px"});
        		});
        		
        		//要等爪子落下的時候才判斷是否抓到娃娃,需要等待1500號碼才執行判斷,不管有沒有抓到娃娃繩子都還要升上去
        		window.setTimeout(function(){
        			//循環遍歷數組判斷,是否可以被夾起來
        			for(var i = 0; i < toys.length; i++){
    	    			if($(toys[i]).css("left").match(/\d*/) > 300 && $(toys[i]).css("left").match(/\d*/)  < 400){
    	    				toys[i].remove();//移除這個元素
    	    				
    	    				$("#uptoy").css("display","block");//將隱藏起來的那個可以被夾起來的娃娃顯示出來
    	    				
    			    		//讓隱藏的娃娃和夾子一起上去
    			    		$("#uptoy").animate({"display":"block","top":"-1100px"},1500,"linear",function(){
    			    			$("#uptoy").css({"display":"none","top":"-750px"});
    			    		});
    	    			}
    	    		}
    	    		
    	    		//動畫將繩子移回原來的位置
    	    		$("#rod").animate({height:"3px"},1500,"linear",function(){
    	    			//當動畫結束的時候,將爪子松開
    	    			$("#hand").css({"backgroundPosition":"158px 0px","width":"150px"});
    	    			flag = true;//等繩子升上去又可以點擊了
    	    		});
        		}, 1500);
        	});
        	//在準備事件的時候讓娃娃自動生成并且從左到右移動
       		//每隔一秒鐘生成一個娃娃并且往右移動
       		window.setInterval(function(){
       			//創建娃娃元素的圖片
       			var img = $("<img style='position:absolute;left:0px;' src='images/toy117.png'>");
       			toys.push(img);//將圖片放入到數組最后
       			//將娃娃元素追加到框中
        		$("#babys").append(img);
        		//讓娃娃動起來,改變它的絕對定位  4秒鐘動完之后移除元素防止元素太多頁面卡死
        		$(img).animate({left:"900px"},4000,"linear",function(){
        			this.remove();//將元素從頁面上移除
        			toys.shift();//刪除數組的第一個元素
        		});
       		}, 1000);
        </script>
    標簽: 抽獎夾娃娃
    最新交易
    評論1
    頭像

    系統已開啟自動識別垃圾評論機制,識別到的自動封號,下載出錯或者資源有問題請聯系全棧客服QQ 2589223951

    • 頭像 沙發
      03-05 10:04
      AJ***on
      挺好的,體驗了一下!
    1 2
    江苏体彩11选五走势图