利用JavaScript Html编写一个移动端红包雨功能页面

　　介绍

本篇文章给大家分享的是有关利用JavaScript Html编写一个移动端红包雨功能页面,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

具体代码如下

Html部分:

& lt; ! DOCTYPE  html> 　　& lt; html  lang=癳n"祝辞 　　& lt; head> 　　,& lt; meta  charset=癠TF-8"比; 　　,& lt; meta  name=皏iewport",内容=翱矶?设备宽度,初始=1.0,比; 　　,& lt; meta  http-equiv=癤-UA-Compatible",内容=癷e=edge"比; 　　,& lt; title>红包雨& lt;/title> 　　,& lt; link  rel=皊tylesheet" https://www.yisu.com/zixun/, href=" ./css/demo.css "> 　　 　　 　　—— 　　%20 　　%20-%20-> 　　 　　 　　%20 　　
　　%20 　　%20 　　<脚本>%20 　　%20%20

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

%20

索引。css部分

%20身体{ 　　,宽度:100%; 　　,高度:100%; 　　,背景图片:url(.%20./图片/bj.jpg); 　　,平铺方式:不再重演; 　　,background-size:封面; 　　,位置:相对; 　　} 　　.redPaper { 　　,宽度:100%; 　　,高度:100%; 　　,/*边境:1 px  solid 黑色;*/,溢出:隐藏; 　　} 　　.redPaper  li  { 　　,位置:绝对; 　　动画:大敌;all  3 s 线性; 　　,最高:-100 px; 　　,-webkit-tap-highlight-color: rgba (0, 0, 0, 0); 　　} 　　.redPaper  li  { 　　,显示:块; 　　} 　　.backward { 　　,宽度:100%; 　　,背景:# ccc; 　　,不透明度:0.5; 　　,位置:绝对; 　　,上图:0; 　　, 　　} 　　.backward 跨度{ 　　,显示:inline-block; 　　,宽度:100 px; 　　,身高:100 px; 　　,颜色:# 000; 　　,粗细:大胆的; 　　,位置:绝对; 　　,上图:0; 　　,左:0; 　　,右:0; 　　,底部:0; 　　保证金:大敌;汽车; 　　,text-align:中心; 　　,行高:100 px; 　　,字体大小:1000%; 　　}

索引。js部分:

(文档)时(美元function  (), { 　　,var  win =,(方法($ (& # 39;.redPaper& # 39;) . css(& # 39;宽度# 39;))),安康;60; 　　,console.log(赢) 　　,$ (“.redPaper") . css (“height",,美元(文档).height ()); 　　,$ (“.backward") . css (“height",,美元(文档).height ()); 　　,$ (“li") . css ({}); 　　,//点击确认的时候关闭模态层 　　,//美元(“.sen  a") .click(函数(){ 　　,//$ (“.mo") . css (“display",,“none") 　　,//}); 　　 　　,var  del =, function  (), { 　　,num + +; 　　,//console.info (num); 　　,//console.log ($ (“.li", +, num) . css (“left")); 　　,$ (“.li", +, num) .remove (); 　　,setTimeout (del, 200) 　　,} 　　 　　,var  addRedPaper =, function  (), { 　　,var  hb =,方法(math . random(), *,(3,安康;1),+,1); 　　,var  randomW =,方法(math . random(), *,(70年,安康;30),+,20); 　　,var  randomLeft =,方法(math . random(), *,赢得); 　　,var  randomRotate =,(方法(math . random(), *, 45)), +, & # 39;度# 39;; 　　,//console.log(腐烂) 　　,num + +; 　　,$ (“.redPaper") .append (“& lt; li 类=& # 39;li", +, num  +,“& # 39;,祝辞& lt; a  href=& # 39; javascript:; & # 39;祝辞& lt; img  src=& # 39;图像/hb_", +, hb  +,“png # 39;, data-num =& # 39;“, +, num  +,“& # 39;祝辞& lt;/a> & lt;/li>“); 　　,$ (“.li", +, num) . css ({ 　　“left"才能:,randomLeft, 　　,}); 　　,$ (“.li", +, num  +,“, a  img") . css ({ 　　“width"才能:,randomW, 　　“transform"才能:,“旋转(“时间+大敌;;randomRotate  +,“)”, 　　“-webkit-transform"才能:,“旋转(“时间+大敌;;randomRotate  +,“)”, 　　“-ms-transform"才能:,“旋转(“时间+大敌;;randomRotate  +,“),,,/*, Internet  Explorer  */?moz-transform"才能:,“旋转(“时间+大敌;;randomRotate  +,“),,,/*, Firefox  */?webkit-transform"才能:,“旋转(“时间+大敌;;randomRotate  +,“)“,/*, Safari 和Chrome  */?o-transform"才能:,“旋转(“时间+大敌;;randomRotate  +,“)“,/*, Opera  */,}); 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

利用JavaScript Html编写一个移动端红包雨功能页面