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 相关文章推荐
javascript与CSS复习(《精通javascript》)
Jun 29 Javascript
json属性名为什么要双引号(个人猜测)
Jul 31 Javascript
js获取元素外链样式的方法
Jan 27 Javascript
JQuery入门基础小实例(1)
Sep 17 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
详解weex默认webpack.config.js改造
Jan 08 Javascript
详解js类型判断
May 22 Javascript
如何用webpack4带你实现一个vue的打包的项目
Jun 20 Javascript
Vue常见面试题整理【值得收藏】
Sep 20 Javascript
Angular封装搜索框组件操作示例
Apr 25 Javascript
Vue-Cli项目优化操作的实现
Oct 27 Javascript
vue 中的动态传参和query传参操作
Nov 09 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
php类
2006/11/27 PHP
PHP 循环列出目录内容的函数代码
2010/05/26 PHP
微盾PHP脚本加密专家php解密算法
2020/09/13 PHP
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
php中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
PHP CodeIgniter分页实例及多条件查询解决方案(推荐)
2017/05/20 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
2017/11/30 Javascript
使用veloticy-ui生成文字动画效果
2018/02/08 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
深入学习Python中的装饰器使用
2016/06/20 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
python查询文件夹下excel的sheet名代码实例
2019/04/02 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
keras 多gpu并行运行案例
2020/06/10 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
Java基础知识面试要点
2016/07/29 面试题
大学生毕业自我鉴定范文
2014/02/03 职场文书
研修心得体会
2014/09/04 职场文书
教师继续教育反思周记
2015/06/25 职场文书
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python