JavaScript Html实现移动端红包雨功能页面


Posted in Javascript onJanuary 10, 2021

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

实现效果如下:

JavaScript Html实现移动端红包雨功能页面

JavaScript Html实现移动端红包雨功能页面

具体代码如下

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="#" ><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 相关文章推荐
javascript中获取选中对象的类型
Apr 02 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
Apr 08 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
Jun 26 Javascript
js post提交调用方法
Feb 12 Javascript
jQuery将多条数据插入模态框的示例代码
Sep 25 Javascript
JavaScript中的继承方式详解
Feb 11 Javascript
jquery中EasyUI实现异步树
Mar 01 Javascript
基于jquery实现无限级树形菜单
Mar 22 Javascript
jquery获取复选框的值的简单实例
May 26 Javascript
星期几的不同脚本写法(推荐)
Jun 01 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
JS实现公告上线滚动效果
Jan 10 #Javascript
Vuex实现简单购物车
Jan 10 #Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 #Vue.js
基于vuex实现购物车功能
Jan 10 #Vue.js
原生JavaScript实现轮播图
Jan 10 #Javascript
原生JavaScript实现留言板
Jan 10 #Javascript
JavaScript实现点击切换验证码及校验
Jan 10 #Javascript
You might like
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
获取远程文件大小的php函数
2010/01/11 PHP
php定界符
2014/06/19 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
PHP准确取得服务器IP地址的方法
2015/06/02 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
php微信开发之谷歌测距
2018/06/14 PHP
juery框架写的弹窗效果适合新手
2013/11/27 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
nodejs脚本centos开机启动实操方法
2020/03/04 NodeJs
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
Python编程图形库之Pillow使用方法讲解
2018/12/28 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
澳大利亚旅游网站:Lastminute
2017/08/07 全球购物
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
房屋转让协议书
2014/04/11 职场文书
优秀班组申报材料
2014/12/25 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
2019年个人工作总结范文
2019/03/25 职场文书
超详细Python解释器新手安装教程
2021/05/10 Python
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android
Oracle中日期的使用方法实例
2022/07/07 Oracle