image.png
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5手机端抢红包雨</title>
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
overflow-y: hidden;
}
body {
margin: 0;
padding: 0;
position: relative;
background-position: center;
overflow-y: hidden;
background: url(./img/bj.jpg) no-repeat top left;
background-size: 100% 100%;
}
.couten {
width: 100%;
height: 100%;
list-style: none;
margin-block-start: 0;
position: relative;
box-sizing: border-box;
padding: 0;
overflow: hidden;
}
.couten li {
width: 2.5rem;
height: 1.6rem;
line-height: 1.6rem;
text-align: center;
position: absolute;
animation: all 3s linear;
top: -2rem;
cursor: pointer;
list-style: none;
}
.couten li img {
width: 2.5rem;
height: 1.6rem;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.couten li span {
width: 100%;
text-align: center;
display: block;
font-size: 0.453333rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(255, 255, 255, 1);
}
.mo {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .2);
z-index: 100;
display: none
}
.mo .sen {
width: 70%;
height: 150px;
border-radius: 5px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.mo .sen img {
width: 60%;
height: 488px;
position: absolute;
top: 0px;
left: 0;
right: 0;
bottom: 212px;
margin: auto;
vertical-align: top;
}
.mo .sen h3 {
width: 50%;
height: 30px;
position: absolute;
top: -35px;
left: 0;
right: 0;
bottom: 0;
margin: auto;
text-align: center;
color: red;
font-size: 140%;
font-weight: bold;
z-index: 999;
}
.mo .sen a {
width: 26%;
height: 50px;
background-color: rgb(174, 222, 244);
box-shadow: rgba(174, 222, 244, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.0470588) 0px 0px 0px 1px inset;
position: absolute;
top: 100px;
left: 0;
right: 0;
bottom: 0;
margin: auto;
color: #fff;
border-radius: 5px;
text-align: center;
line-height: 50px;
text-decoration: none;
}
.clear {
clear: both;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.0rc1/zepto.min.js"></script>
<script>
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 37.5 * (clientWidth / 375) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
<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());
$(".sen a").click(function() {
$(".mo").hide();
});
var num = 0;
var arr = ['样','好','屋','里','好','难','发','没','丽','发','没','丽'];
var add = function() {
var hb = parseInt(Math.random() * (3 - 1) + 1);
var Wh = parseInt(Math.random() * 100);
var Left = parseInt(Math.random() * (9));
var rot = (parseInt(Math.random() * (45 - (-45)) - 45)) + "deg";
console.log(win, Math.random())
num++;
$(".couten").append("<li class='li" + num +
"' ><img src='./img/hb.png'><span>"+arr[num]+"<span></li>");
$(".li" + num).css({
"left": Left + 'rem',
});
$(".li" + num + " a img").css({
"width": '100%',
"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() + 10
}, 10000, function() {
//删掉已经显示的红包
});
if (num > arr.length-2) {
num=0;
// arr=arr.concat(arr)
console.log(arr)
}
//点击红包的时候弹出模态层
$(".li" + num).tap(function() {
});
setTimeout(add, 1000)
}
//增加红包
var num = 0;
add();
})
</script>
</head>
<body>
<ul class="couten">
</ul>
<div class="mo" style="background: rgba(0,0,0,0.4);">
<div class="sen">
<img src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201702/jiaoben4852/images/gx.png">
<h3>获得红包3元</h3>
<a href="#">确定</a>
</div>
</div>
</body>
</html>
