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

2024-12-05 11:41:00

本文实例为大家分享了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="#" rel="external nofollow" ><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实现移动端红包雨页面

本文实例为大家分享了js实现移动端红包雨页面的具体代码,供大家参考,具体内容如下实习的效果如下: 具体代码如下 html部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=
js+css实现红包雨效果

本文实例为大家分享了js实现红包雨展示的具体代码,供大家参考,具体内容如下 1.html部分红包的样子,先写一个模版在页面上 <div class="hide"> <div class="RedPackage__Box js-RedPackageBox" data-txt> <img src="./images/redPackage.png" alt=""> </div> &l
JavaScript Html实现移动端红包雨功能页面

本文实例为大家分享了Html实现移动端红包雨功能页面的具体代码,供大家参考,具体内容如下实现效果如下: 具体代码如下 html部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca
微信小程序实现红包雨功能

本文为大家分享了微信小程序实现红包雨的具体代码,供大家参考,具体内容如下今天有个小师妹来问我怎样用微信小程序实现红包雨效果,如果用web很好实现,但是小程序不是那么容易,整合自己也有一年没摸过小程序了,决定试一试. 首先明确"红包雨"的需求: 随机位置掉落随机红包样式同一时间掉落个数随机每个红包的掉落速度随机,但不能太快也不能太慢首先看看我做的效果吧首先明确小程序实现红包雨和web网页实现红包雨难点上有什么不同: 小程序不能直接操作dom,web网页可以操作小程序循环渲染
vue移动端实现红包雨效果

本文实例为大家分享了vue实现红包雨效果的具体代码,供大家参考,具体内容如下下面是代码: <template> <div class="ser_home"> <ul class="red_packet" id="red_packet"> <template v-for="(item, index) in liParams"> <li :style="{ left
Vue实现红包雨小游戏的示例代码

目录 0 写在前面 1 准备工作 2 设计HTML+CSS样式 3 设计JavaScript逻辑 4 完整代码 0 写在前面红包也叫压岁钱,是过农历春节时长辈给小孩儿用红纸包裹的礼金.据传明清时期,压岁钱大多数是用红绳串着赐给孩子.民国以后,则演变为用红纸包裹.中国的红包传统民族文化在民间如此,社区.公司也奉行如仪.除了春节以外,在其他喜庆场合,例如婚礼.新店开张等亦有送红包的习俗. 本期迎新春专题用代码制作一个红包雨小游戏 ,效果如下所示.看完本文相信你也可以完成这样一个小游戏设计. 1
JavaScript实现搜索框的自动完成功能(一)

在很多需要搜索的网站, 都会有一个自动完成的搜索框. 方便用户查找他们想要的搜索词. 帮助用户快速找到自己想要的结果. 这种方式是比较友好的. 所以是比较提倡使用的. 先给大家展示下效果图: 实现这个功能需要服务端配合.客户端通过脚本来展示从服务端取得的数据. 先看客户端的HTML: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DT
解密朋友圈红包照片功能

昨天大家是不是都被微信朋友圈的毛玻璃图片刷屏了?这是微信为新春红包准备的一个新的功能,昨天内测了一段时间,传播效应很大,这告诉我们一个道理:没钱,以后连朋友圈都看不了.这功能刚推出大家都在忙着发红包照片的时候,身为程序员天生的敏感,稍微研究了下如何不花钱就能查看,并且第一时间发布在我朋友圈里,今天就给大家分享下,这个技能可谓是Android开发必备哦. 先来回答大家的一个困惑,就是微信这功能怎么做出来的,好神奇啊,这功能说上线就上线,说下线就下线,不少人猜测到底是用了什么神奇的技术实现的,用了传
JavaScript实现的前端AES加密解密功能【基于CryptoJS】

本文实例讲述了JavaScript实现的前端AES加密解密功能.分享给大家供大家参考,具体如下: js前端AES加密最近由于项目需求做了一次MITM,突然即使发现使用HTTPS,也不能保证数据传输过程中的安全性. 通过中间人攻击,可以直接获取到Http协议的所有内容. 于是开始尝试做一些简单的加密,在一定程度上保证安全性. 本次采用AES加密数据,所以客户端和服务端使用的相同秘钥.(仅作为演示,正式环境推荐使用RSA) 首先准备一份明文密码和加密使用的KEY var source = "ABC
vue 实现Web端的定位功能获取经纬度

首先我这里的需求呢, 是获取当前用户的经纬度经过无数次的测试, 先后用了腾讯/百度地图的api,最后绝对还是高德的js APi 废话不多说, 直接上代码. 首先在 index.html 里面引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key"></script> 然后去你需要获取的页面开始写, 我这里
Vue实现浏览器端扫码功能

背景不久前我做了关于获取浏览器摄像头并扫码识别的功能,本文中梳理了涉及到知识点及具体代码实现,整理成此篇文章内容. 本文主要介绍,通过使用基于 vue 技术栈的前端开发技术,在浏览器端调起摄像头

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

相关推荐

随机推荐