注册 登录 充值会员 退出
联系客服 毕业设计 java源码 PHP源码
充值

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

作者/代码整理:  (源码已亲测,不会安装的可以向QQ1915635791要安装视频教程) 发布日期:2022-05-25
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>

关注公众号,免费赠送安装视频教程、环境和学习视频,后面会不断更新。