html5移动端手机微信抢红包雨代码

html5移动端手机微信抢红包雨代码-精品资源网
html5移动端手机微信抢红包雨代码
此内容为免费资源,请登录后查看
0
免费资源

html5移动端手机微信抢红包雨代码

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>

© 版权声明
THE END
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容