javascript实现移动端红包雨页面


Posted in Javascript onJune 23, 2020

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

实习的效果如下:

javascript实现移动端红包雨页面

javascript实现移动端红包雨页面

具体代码如下

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 相关文章推荐
仿迅雷焦点广告效果(JQuery版)
Nov 19 Javascript
javascript 简单抽屉效果的实现代码
Mar 09 Javascript
说说JSON和JSONP 也许你会豁然开朗
Sep 02 Javascript
同时使用n个window onload加载实例介绍
Apr 25 Javascript
Jquery解析Json格式数据过程代码
Oct 17 Javascript
jquery移动节点实例
Jan 14 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
react-native滑动吸顶效果的实现过程
Jun 03 Javascript
Nuxt使用Vuex的方法示例
Sep 06 Javascript
vue中实现回车键登录功能
Feb 19 Javascript
Node.JS如何实现JWT原理
Sep 18 Javascript
JS实现canvas简单小画板功能
Jun 23 #Javascript
javascript+Canvas实现画板功能
Jun 23 #Javascript
vue.js实现照片放大功能
Jun 23 #Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 #Javascript
vue.js实现双击放大预览功能
Jun 23 #Javascript
vue实现分页的三种效果
Jun 23 #Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
Jun 23 #Javascript
You might like
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
JQuery datepicker 使用方法
2011/05/20 Javascript
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
react-router实现按需加载
2017/05/09 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
Node.js net模块功能及事件监听用法分析
2019/01/05 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
详解Vue中的scoped及穿透方法
2019/04/18 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
vue 实现图片懒加载功能
2020/12/31 Vue.js
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
python如何让类支持比较运算
2018/03/20 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
wxPython实现带颜色的进度条
2019/11/19 Python
Python正则表达式如何匹配中文
2020/05/27 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
致标枪运动员加油稿
2014/02/15 职场文书
大学生会计职业生涯规划范文
2014/02/28 职场文书
和谐家庭演讲稿
2014/05/24 职场文书
光棍节联谊晚会活动策划书
2014/10/10 职场文书
python 自动刷新网页的两种方法
2021/04/20 Python
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers