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之querySelector和querySelectorAll使用说明
Oct 09 Javascript
javascript将相对路径转绝对路径示例
Mar 14 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 Javascript
js实现禁止中文输入的方法
Jan 14 Javascript
跟我学习javascript的arguments对象
Nov 16 Javascript
JS实现数字格式千分位相互转换方法
Aug 01 Javascript
request请求获取参数的实现方法(post和get两种方式)
Sep 27 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
JS实现横向轮播图(初级版)
Jun 24 Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 Javascript
Postman内建变量常用方法实例解析
Jul 28 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
php变量作用域的深入解析
2013/06/03 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
PHP+Javascript实现在线拍照功能实例
2015/07/18 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
在PHP中实现使用Guzzle执行POST和GET请求
2019/10/15 PHP
Laravel 实现添加多语言提示信息
2019/10/25 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
禁止js文件缓存的代码
2010/04/09 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
2010/05/14 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
JavaScript对象学习经验整理
2013/10/12 Javascript
浅谈jquery回调函数callback的使用
2015/01/30 Javascript
JavaScript实现图片轮播的方法
2015/07/31 Javascript
JavaScript编程中实现对象封装特性的实例讲解
2016/06/24 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
微信小程序 开发之顶部导航栏实例代码
2017/02/23 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
Javascript 严格模式use strict详解
2017/09/16 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
[01:34:42]NAVI vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python模拟登陆淘宝并统计淘宝消费情况的代码实例分享
2016/07/04 Python
在python环境下运用kafka对数据进行实时传输的方法
2018/12/27 Python
Python3爬虫之urllib携带cookie爬取网页的方法
2018/12/28 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
Python3获取cookie常用三种方案
2020/10/05 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
椰子猫砂:CatSpot
2018/08/27 全球购物
北京大学自荐信范文
2014/01/28 职场文书
有限公司股东合作协议书
2014/10/29 职场文书
2015年综治宣传月活动总结
2015/03/25 职场文书
iPhone13 Pro外观确定,升级4800万镜头,4月20日发新品
2021/04/15 数码科技
react中props 的使用及进行限制的方法
2021/04/28 Javascript