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 相关文章推荐
一段利用WSH修改和查看IP配置的代码
May 11 Javascript
javascript showModalDialog模态对话框使用说明
Dec 31 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
Feb 24 Javascript
JS的Document属性和方法小结
Sep 17 Javascript
javascript中动态函数用法实例分析
May 14 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
Aug 03 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
关于vue中 $emit的用法详解
Apr 12 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
Nov 09 Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 Javascript
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
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
Yii2中添加全局函数的方法分析
2017/05/04 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
jquery的颜色选择插件实例代码
2008/10/02 Javascript
jQuery的链式调用浅析
2010/12/03 Javascript
appendChild() 或 insertBefore()使用与区别介绍
2013/10/11 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
Nodejs初级阶段之express
2015/11/23 NodeJs
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
史上最为详细的javascript继承(推荐)
2019/05/18 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
Python函数学习笔记
2008/10/07 Python
python文件操作相关知识点总结整理
2016/02/22 Python
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
Python基础之getpass模块详细介绍
2017/08/10 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
Python Selenium参数配置方法解析
2020/01/19 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
Linux的文件类型
2016/07/05 面试题
农村婚礼主持词
2014/03/13 职场文书
婚前保证书
2014/04/29 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
教师个人年终总结
2015/02/11 职场文书
《雪地里的小画家》教学反思
2016/02/16 职场文书
创业计划书之烤红薯
2019/09/26 职场文书
pytorch查看网络参数显存占用量等操作
2021/05/12 Python
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js