脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js移动端红包雨

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

 更新时间：2021年01月10日 14:27:01   作者：Jeslie-He  
这篇文章主要为大家详细介绍了JavaScript Html实现移动端红包雨功能页面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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 的事件综合分析

    js下比较常用的方法，事件函数代码。
    2010-08-08
  • 利用JS响应式修改vue实现页面的input值

    利用JS响应式修改vue实现页面的input值

    这篇文章主要给大家介绍了关于如何利用JS响应式修改vue实现页面的input值，文中通过示例代码介绍的非常详细，对大家学习或者使用JS具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-09-09
  • javascript 面向对象封装与继承

    javascript 面向对象封装与继承

    本文是对自己这么长时间以来学习javascript面向对象的总结，这里针对封装和继承结合实例进行了详细分析，给有相同需求的小伙伴们参考下吧。
    2014-11-11
  • 微信小程序调用后台service教程详解

    微信小程序调用后台service教程详解

    这篇文章主要介绍了微信小程序调用后台service教程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-11-11
  • webpack常用配置项配置文件介绍

    webpack常用配置项配置文件介绍

    这篇文章主要为大家详细介绍了webpack常用配置项配置文件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-11-11
  • javascript模仿msgbox提示效果代码

    javascript模仿msgbox提示效果代码

    js对话框的模拟演示代码
    2008-06-06
  • 使用hasOwnProperty时报错的解决方法

    使用hasOwnProperty时报错的解决方法

    hasOwnProperty这个方法是用来查找一个对象是否有某个属性,且查找的属性必须是对象本身的一个成员,但是不会去查找对象的原型链,文中介绍了使用示例代码及使用时可能会遇到的问题,对hasOwnProperty报错原因分析及解决方法感兴趣的朋友一起看看吧
    2024-01-01
  • javascript实现瀑布流自适应遇到的问题及解决方案

    javascript实现瀑布流自适应遇到的问题及解决方案

    这篇文章主要介绍了javascript实现瀑布流自适应遇到的问题及解决方案,需要的朋友可以参考下
    2015-01-01
  • js时间戳转为日期格式的方法

    js时间戳转为日期格式的方法

    这篇文章主要介绍了js时间戳转为日期格式的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2015-12-12
  • JavaScript对象反射用法实例

    JavaScript对象反射用法实例

    这篇文章主要介绍了JavaScript对象反射用法,实例分析了反射DOM对象和自定义对象的具体用法,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04

最新评论