• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
123457390 显示全部楼层 发表于 2021-10-25 19:21:56 |阅读模式 打印 上一主题 下一主题
本文实例为各人分享了Html实现移动端红包雨功能页面的详细代码,供各人参考,详细内容如下
实现效果如下:


详细代码如下
html部门:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>红包雨</title>
  8. <link rel="stylesheet" href="./css/demo.css" >
  9. <link rel="stylesheet" href="./css/index.css" >
  10. </head>
  11. <body>
  12. <!-- 红包 -->
  13. <ul class="redPaper">
  14. <!-- <li>
  15. <a href="#" ><img src="./images/hb_1.png" alt=""></a>
  16. </li> -->
  17. </ul>
  18. <div class="backward">
  19. <span></span>
  20. </div>
  21. <script src="./js/jquery.min.js"></script>
  22. <script src="./js/index.js"></script>
  23. <script>
  24. </script>
  25. </body>
  26. </html>
复制代码
demo.css为初始化css,可以不加
index.css部门
  1. body{
  2. width: 100%;
  3. height: 100%;
  4. background-image: url(../images/bj.jpg);
  5. background-repeat: no-repeat;
  6. background-size: cover;
  7. position: relative;
  8. }
  9. .redPaper{
  10. width: 100%;
  11. height: 100%;
  12. /* border: 1px solid black; */
  13. overflow: hidden;
  14. }
  15. .redPaper li {
  16. position: absolute;
  17. animation: all 3s linear;
  18. top:-100px;
  19. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  20. }
  21. .redPaper li a{
  22. display: block;
  23. }
  24. .backward{
  25. width: 100%;
  26. background:#ccc;
  27. opacity: 0.5;
  28. position: absolute;
  29. top: 0;
  30. }
  31. .backward span{
  32. display: inline-block;
  33. width: 100px;
  34. height: 100px;
  35. color: #000;
  36. font-weight: bold;
  37. position: absolute;
  38. top: 0;
  39. left: 0;
  40. right: 0;
  41. bottom: 0;
  42. margin: auto;
  43. text-align: center;
  44. line-height: 100px;
  45. font-size: 1000%;
  46. }
复制代码
index.js部门:
  1. $(document).ready(function () {
  2. var win = (parseInt($('.redPaper').css('width'))) - 60;
  3. console.log(win)
  4. $(".redPaper").css("height", $(document).height());
  5. $(".backward").css("height", $(document).height());
  6. $("li").css({});
  7. // 点击确认的时候关闭模态层
  8. // $(".sen a").click(function(){
  9. // $(".mo").css("display", "none")
  10. // });
  11. var del = function () {
  12. nums++;
  13. // console.info(nums);
  14. // console.log($(".li" + nums).css("left"));
  15. $(".li" + nums).remove();
  16. setTimeout(del, 200)
  17. }
  18. var addRedPaper = function () {
  19. var hb = parseInt(Math.random() * (3 - 1) + 1);
  20. var randomW = parseInt(Math.random() * (70 - 30) + 20);
  21. var randomLeft = parseInt(Math.random() * win);
  22. var randomRotate = (parseInt(Math.random() * 45)) + 'deg';
  23. // console.log(rot)
  24. num++;
  25. $(".redPaper").append("<li class='li" + num + "' ><a href='javascript:;'><img src='images/hb_" + hb + ".png' data-num ='" + num + "'></a></li>");
  26. $(".li" + num).css({
  27. "left": randomLeft,
  28. });
  29. $(".li" + num + " a img").css({
  30. "width": randomW,
  31. "transform": "rotate(" + randomRotate + ")",
  32. "-webkit-transform": "rotate(" + randomRotate + ")",
  33. "-ms-transform": "rotate(" + randomRotate + ")", /* Internet Explorer */
  34. "-moz-transform": "rotate(" + randomRotate + ")", /* Firefox */
  35. "-webkit-transform": "rotate(" + randomRotate + ")",/* Safari 和 Chrome */
  36. "-o-transform": "rotate(" + randomRotate + ")" /* Opera */
  37. });
  38. $(".li" + num).animate({ 'top': $(window).height() + 20 }, 5000, function () {
  39. //删掉已经显示的红包
  40. this.remove()
  41. });
  42. //点击红包的时候弹出模态层
  43. $(".li" + num).click(function (e) {
  44. if (e.target.tagName == 'IMG') {
  45. console.log(e.target.dataset.num)
  46. }
  47. });
  48. setTimeout(addRedPaper, 200)
  49. }
  50. //增加红包
  51. var num = 0;
  52. setTimeout(addRedPaper, 3000);
  53. //倒数计时
  54. var backward = function () {
  55. numz--;
  56. if (numz > 0) {
  57. $(".backward span").html(numz);
  58. } else {
  59. $(".backward").remove();
  60. }
  61. setTimeout(backward, 1000)
  62. }
  63. var numz = 4;
  64. backward();
  65. })
复制代码
以上就是本文的全部内容,希望对各人的学习有所帮助,也希望各人多多支持草根技能分享。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作