0
回答
Js实现手机端红包雨效果
华为云4核8G,高性能云服务器,免费试用   

演示下载地址:http://www.erdangjiade.com/js/1105.html

$(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();

})

演示下载地址:http://www.erdangjiade.com/js/1105.html

<无标签>
举报
2当家的
发帖于1年前 0回/1K+阅
顶部