javascript实现移动端红包雨页面

本文实例为大家分享了js实现移动端红包雨页面的具体代码,供大家参考,具体内容如下

实习的效果如下:

具体代码如下

html部分:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>红包雨</title>

<link rel="stylesheet" href="./css/demo.css" >

<link rel="stylesheet" href="./css/index.css" >

</head>

<body>

<!-- 红包 -->

<ul class="redPaper">

<!-- <li>

<a href="#" rel="external nofollow" ><img src="./images/hb_1.png" alt=""></a>

</li> -->

</ul>

<div class="backward">

<span></span>

</div>

<script src="./js/jquery.min.js"></script>

<script src="./js/index.js"></script>

<script>

</script>

</body>

</html>

demo.css为初始化css,可以不加

index.css部分

body{

width: 100%;

height: 100%;

background-image: url(../images/bj.jpg);

background-repeat: no-repeat;

background-size: cover;

position: relative;

}

.redPaper{

width: 100%;

height: 100%;

/* border: 1px solid black; */

overflow: hidden;

}

.redPaper li {

position: absolute;

animation: all 3s linear;

top:-100px;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

.redPaper li a{

display: block;

}

.backward{

width: 100%;

background:#ccc;

opacity: 0.5;

position: absolute;

top: 0;

}

.backward span{

display: inline-block;

width: 100px;

height: 100px;

color: #000;

font-weight: bold;

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

text-align: center;

line-height: 100px;

font-size: 1000%;

}

index.js部分:

$(document).ready(function () {

var win = (parseInt($('.redPaper').css('width'))) - 60;

console.log(win)

$(".redPaper").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 addRedPaper = function () {

var hb = parseInt(Math.random() * (3 - 1) + 1);

var randomW = parseInt(Math.random() * (70 - 30) + 20);

var randomLeft = parseInt(Math.random() * win);

var randomRotate = (parseInt(Math.random() * 45)) + 'deg';

// console.log(rot)

num++;

$(".redPaper").append("<li class='li" + num + "' ><a href='javascript:;'><img src='images/hb_" + hb + ".png' data-num ='" + num + "'></a></li>");

$(".li" + num).css({

"left": randomLeft,

});

$(".li" + num + " a img").css({

"width": randomW,

"transform": "rotate(" + randomRotate + ")",

"-webkit-transform": "rotate(" + randomRotate + ")",

"-ms-transform": "rotate(" + randomRotate + ")", /* Internet Explorer */

"-moz-transform": "rotate(" + randomRotate + ")", /* Firefox */

"-webkit-transform": "rotate(" + randomRotate + ")",/* Safari 和 Chrome */

"-o-transform": "rotate(" + randomRotate + ")" /* Opera */

});

$(".li" + num).animate({ 'top': $(window).height() + 20 }, 5000, function () {

//删掉已经显示的红包

this.remove()

});

//点击红包的时候弹出模态层

$(".li" + num).click(function (e) {

if (e.target.tagName == 'IMG') {

console.log(e.target.dataset.num)

}

});

setTimeout(addRedPaper, 200)

}

//增加红包

var num = 0;

setTimeout(addRedPaper, 3000);

//倒数计时

var backward = function () {

numz--;

if (numz > 0) {

$(".backward span").html(numz);

} else {

$(".backward").remove();

}

setTimeout(backward, 1000)

}

var numz = 4;

backward();

})

以上是 javascript实现移动端红包雨页面 的全部内容, 来源链接: utcz.com/z/327969.html

回到顶部