本文实例为大家分享了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(); })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持站长技术。
介绍 图表是数据的图形表示,用于使数据集更易于阅读,并且易于区分各部分。虽然...
分享一个歌词直接让我笑喷的歌词----之前我不听歌的毕竟第一次听到。学习的目的...
主要是:ppt文件转为pdf文件,pdf文件转图片(png)。 描述一下需求:上传PPT或者P...
9月11日,在腾讯2020全球数字生态大会数据库专场上,腾讯云正式发布面向混合云的...
在前几篇分析了jquery的ajax异步和同步,以及异常的一些处理,感觉还没有把ajax...
第五章:XML实例解析 提纲: 一:实例效果 二:实例解析 1.定义新标识。 2.建立X...
ROS机器人小车底盘DIY有何难不枉做一个程序猿躯壳码上有功能 前文的躯壳 arduino...
3 月 5 日消息 微软 Edge 浏览器的稳定版今天已经更新到 89.0.774.45 版本,这次...
5大隔离级别 使用后端数据库事务默认的隔离级别 读未提交 允许读取尚未提交的数...
Windows 7下IE9安全级别设置项如下表示。(留空代表同前一列的值,无变化) 类别...