html5移动端手机微信抢红包雨代码,打开页面,红包随机飘落进行抢红包,点击可查看中奖情况。
js代码
<script type=\"text/javascript\"> $(document).ready(function() { var win = (parseInt($(\".couten\").css(\"width\"))) - 60; $(\".mo\").css(\"height\", $(document).height()); $(\".couten\").css(\"height\", $(document).height()); $(\".backward\").css(\"height\", $(document).height()); $(\"li\").css({}); // 点击确认的时候关闭模态层 $(\".sen a\").click(function(){ $(\".mo\").css(\"display\", \"none\") }); var del = function(){ nums++; // console.info(nums); // console.log($(\".li\" + nums).css(\"left\")); $(\".li\" + nums).remove(); setTimeout(del,200) } var add = function() { var hb = parseInt(Math.random() * (3 - 1) + 1); var Wh = parseInt(Math.random() * (70 - 30) + 20); var Left = parseInt(Math.random() * (win - 0) + 0); var rot = (parseInt(Math.random() * (45 - (-45)) - 45)) + \"deg\"; // console.log(rot) num++; $(\".couten\").append(\"<li class=\'li\" + num + \"\' ><a href=\'javascript:;\'><img src=\'images/hb_\" + hb + \".png\'></a></li>\"); $(\".li\" + num).css({ \"left\": Left, }); $(\".li\" + num + \" a img\").css({ \"width\": Wh, \"transform\": \"rotate(\" + rot + \")\", \"-webkit-transform\": \"rotate(\" + rot + \")\", \"-ms-transform\": \"rotate(\" + rot + \")\", /* Internet Explorer */ \"-moz-transform\": \"rotate(\" + rot + \")\", /* Firefox */ \"-webkit-transform\": \"rotate(\" + rot + \")\",/* Safari 和 Chrome */ \"-o-transform\": \"rotate(\" + rot + \")\" /* Opera */ }); $(\".li\" + num).animate({\'top\':$(window).height()+20},5000,function(){ //删掉已经显示的红包 this.remove() }); //点击红包的时候弹出模态层 $(\".li\" + num).click(function(){ $(\".mo\").css(\"display\", \"block\") }); setTimeout(add,200) } //增加红包 var num = 0; setTimeout(add,3000); //倒数计时 var backward = function(){ numz--; if(numz>0){ $(\".backward span\").html(numz); }else{ $(\".backward\").remove(); } setTimeout(backward,1000) } var numz = 4; backward(); }) </script>
暂无评论内容