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

实现效果如下:

具体代码如下

html部分:

		
		
		
		
		
		
		
			红包雨
		

 

		

demo.css为初始化css,可以不加

index.css部分

body{
 width: 100%;
 height: 100%;
 background-image: url(http://www.580doc.com/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" + 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 Html实现移动端红包雨功能页面的更多相关文章

    1. JavaScript 如何禁止用户保存图片

      场景 在业务需求中不希望用户保存图片,因为是一些供内部使用的图片。 思路 添加事件禁止选择、拖拽、右键(简单的禁......

    2. JavaScript如何操作css

      原本应该是由css进行控制html中的div的宽高和背景颜色,但是在下方使用了JavaScript进行重新调用了di......

    3. JavaScript 中的六种循环方法

      Javascript中的遍历循环1.for循环对于数值索引的数组来说,可以使用标准的for循环来遍历值const a......

    4. 详解JavaScript中的链式调用

      链模式链模式是一种链式调用的方式,准确来说不属于通常定义的设计模式范畴,但链式调用是一种非常有用的代码构建技巧。描述......

    5. JavaScript中的Proxy对象

      Js中Proxy对象Proxy对象用于定义基本操作的自定义行为,例如属性查找、赋值、枚举、函数调用等。语法const......

    6. javascript 数组(list)添加/删除的实现

      javascript 数组Array(list)添加/删除unshift:将参数添加到原数组开头,并返回数组的长度p......

    7. 前端 javascript 实现文件下载的示例

      在 html5 中,a 标签新增了 download 属性,包含该属性的链接被点击时,浏览器会以下载文件方式下载 h......

    8. JavaScript canvas实现文字时钟

      本文实例为大家分享了canvas实现文字时钟的具体代码,供大家参考,具体内容如下 先看看效果图 代码 &l......

    9. jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】

      本文实例讲述了jQuery+css实现的点击图片放大缩小预览功能。分享给大家供大家参考,具体如下:要求点击一张图片,......

    10. javascript中call,apply,bind的区别详解

      在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢。在说区别之前还是先总结一下三者的相似之......

    随机推荐

    1. C++ 入门篇

      C++基础入门 1 C++初识 1.1 第一个C++程序 编写一个C++程序总共分为4个步骤 创建项目 ......

    2. php的lavarel框架中join和orWhere的用法

      Laravel是一个开源PHP框架,功能强大且易于理解。它遵循模型 - 视图 - 控制器设计模式(MVC)。Lara......

    3. php swoft框架实例用法

      在框架选择上,不少人会觉得swoft才是最强PHP框架,尤其是在常驻内存模式的应用级高性能框架,性能是这一堆页面级框......

    4. 详解java中static关键词的作用

      在java中,static是一个修饰符,用于修饰类的成员方法、类的成员变量,另外可以编写static代码块来优化程序......

    5. iOS中几种定时器的实现小结

      在软件开发过程中,我们常常需要在某个时间后执行某个方法,或者是按照某个周期一直执行某个方法。在这个时候,我们就需要用......

    6. javascript 数组(list)添加/删除的实现

      javascript 数组Array(list)添加/删除unshift:将参数添加到原数组开头,并返回数组的长度p......

    7. php的curl携带header请求头信息实现http访问的方法

      导读:curl请求时添加请求头信息可以模拟真人操作,不容易被当成是爬虫机器人(采集),从而可以绕过Incapsula......

    8. 浅入 .NET Core 中的内存和GC知识

      目录 托管代码 自动内存管理 参考资料: 【1】https://docs.microsoft.com/z......

    9. C# 调用FFmpeg处理音视频的示例

      FFmpeg 开源、跨平台、体积小、功能强大,提供了录制、转换以及流化音视频的完整解决方案。官网:https:/......

    10. SpringCloud | 通过电商业务场景让你彻底明白SpringCloud核心组件的底层原理

      本文分为两个部分:Spring Cloud"全家桶"简单介绍。通过实际电商业务场景,让你彻底明白......