JavaScript Html实现移动端红包雨功能页面
这篇文章主要为大家详细介绍了JavaScript Html实现移动端红包雨功能页面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Html实现移动端红包雨功能页面的具体代码,供大家参考,具体内容如下
实现效果如下:
具体代码如下
html部分:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!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="#" ><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部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | 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 3 s 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部分:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | $(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(); }) |
以上就是本文的全部内容,希望对大家的学习有所帮助