首頁 > 開發者 > JavaScript
[html] html> <head> <title></title> <style type="text/css"> body{padding:0px;margin:0px;font-size:12px;overflow:hidden;background:#000;} #container div{padding:10px;position:absolute;border:0px dotted brown;width:0px;color:#FF0000;cursor:pointer;} .text{padding:10px;color:#ccc;} </style> <script type="text/javascript" src="http://www.cozof.com/images/js/jquery.min.1.5.js"></script> <script type="text/javascript"> var goldFallInterval; var goldFallStart=0; function initGoldFall(){ var length = $('div','#container').length; if(length<4){ for(i=0;i<6;i++){ $('div','#container').clone().prependTo('#container'); } } } function startGoldFall(){ clearInterval(goldFallInterval); endCount = 0; range(); goldFallStart = new Date().getTime(); goldFallInterval= setInterval(dropGoldFall,200); } //排列 function range() { var num = 1; $('div','#container').each(function(i) { var ww = $(window).width();//視窗寬度 var wh = $(window).height(); var ot = -20;//從頭部以上開始 $(this).css({"left":(i*(ww/64)) +"px","top":"-50px"});//距左距離保持，距上距離變化 num ++; }); } //降落 function dropGoldFall() { var now = new Date().getTime(); if(now - goldFallStart >3000){ clearInterval(goldFallInterval); } var $objs = $('div','#container'); $objs.each(function(i) { var wh = $(window).height(); var ol = $(this).offset().left; var ot = $(this).offset().top; var rnd = Math.round(Math.random()*100); var rnd2 = Math.round(Math.random()*50); //降落的速度 if(ot<=wh)//如果掉到視窗以下 { $(this).css({"top":(ot+rnd+rnd2) +"px"}); } }); } function fn(){ initGoldFall(); startGoldFall(); } </script> </head> <body> <!--begin--> <div id="container"> <div><img src=image/gold.png ></div> </div> woafdasfasfdasfsadfasfasf<input type=button onclick="fn();" value=test> <!--end--> </body> <script language="javascript"> </script> </html> 問題描述HTML5遊戲中過關希望實現撒金幣效果，最開始通過canvas寫了幾個簡單的隨機函數繪製金幣，發現效果不行。通過收索發現有jquery實現的下雪效果： 希望更換雪片的貼圖，後發現jquery的幾個下雪模型都是使用 '❄' 這個符號來實現的，所以無法更換貼圖。最終參考了 中的代碼實現了一個簡單的。 實現代碼 自己準備金幣的圖片，直接運行。 通過調用一下代碼，可多次啟動。[html] initGoldFall(); startGoldFall();
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
