其他分享
首页 > 其他分享> > h5春节小游戏制作

h5春节小游戏制作

作者:互联网

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="viewport"
      content="width=320,maximum-scale=1.3,user-scalable=no"
    />
    <title>Document</title>
    <link rel="stylesheet" href="./css/siper.min.css" />
    <link rel="stylesheet" href="./css/reset.min.css" />
    <link rel="stylesheet" href="./css/public.min.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/animate.min.css" />
    <script
      type="text/javascript"
      src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"
    ></script>
    <script src="./js/font-size.min.js"></script>
    <style>
      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }
      .swiper-container {
        width: 100%;
        height: 100%;
      }
      .swiper-wrapper {
        width: 4rem;
        height: 6rem !important;
      }
      .swiper-slide {
        text-align: center;
        font-size: 18px;
        width: 4rem;
        height: 1rem;
        line-height: 100px;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        background-size: 100%;
      }
      .active {
        background: url("./img/congratulatory_kuang.png") no-repeat center;
        background-size: 100%, 100%;
      }
      .active span {
        color: #ca0000 !important;
      }
      .swiper-slide {
        height: 1rem !important;
      }
      .swiper-slide span {
        font-size: 0.6rem;
        font-family: "方正榜书行简体";
        color: #ffe291;
        height: 42px;
        line-height: 42px;
      }
      .refresh {
        position: absolute;
        line-height: 100px;
        bottom: 100%;
        text-align: center;
        width: 100%;
      }
      .loadmore {
        position: absolute;
        line-height: 20px;
        top: 100%;
        text-align: center;
        width: 100%;
      }
      .swiper-scrollbar-drag {
        height: 2rem !important;
      }
      .congratulatory .next {
        top: 9.3rem;
        left: 4rem;
      }
      .congratulatory .prev {
        top: 9.3rem;
        right: 2rem;
      }
      .congratulatory .select_niu {
        width: 4rem;
        top: 2.5rem;
        left: 1.7rem;
      }
      .congratulatory .swiper-slide span {
        width: 60%;
      }
      .congratulatory .swiper-slide:nth-child(1) span {
        background: url("./img/congratulatory1.png") no-repeat center;
        background-size: 100%;
      }
      .congratulatory .swiper-slide:nth-child(1).active span {
        background: url("./img/congratulatory11.png") no-repeat center;
        background-size: 100%;
      }
      .congratulatory .swiper-slide:nth-child(2) span {
        background: url("./img/congratulatory2.png") no-repeat center;
        background-size: 100%;
      }
      .congratulatory .swiper-slide:nth-child(2).active span {
        background: url("./img/congratulatory22.png") no-repeat center;
        background-size: 100%;
      }
      .congratulatory .swiper-slide:nth-child(3) span {
        background: url("./img/congratulatory3.png") no-repeat center;
        background-size: 100%;
      }
      .congratulatory .swiper-slide:nth-child(3).active span {
        background: url("./img/congratulatory33.png") no-repeat center;
        background-size: 100%;
      }
      .congratulatory .swiper-slide:nth-child(4) span {
        background: url("./img/congratulatory4.png") no-repeat center;
        background-size: 100%;
      }
      .congratulatory .swiper-slide:nth-child(4).active span {
        background: url("./img/congratulatory44.png") no-repeat center;
        background-size: 100%;
      }
      .congratulatory .swiper-slide:nth-child(5) span {
        background: url("./img/congratulatory5.png") no-repeat center;
        background-size: 100%;
      }
      .congratulatory .swiper-slide:nth-child(5).active span {
        background: url("./img/congratulatory55.png") no-repeat center;
        background-size: 100%;
      }
      .congratulatory .swiper-slide:nth-child(6) span {
        background: url("./img/congratulatory6.png") no-repeat center;
        background-size: 100%;
      }
      .congratulatory .swiper-slide:nth-child(6).active span {
        background: url("./img/congratulatory66.png") no-repeat center;
        background-size: 100%;
      }
      .congratulatory .swiper-slide:nth-child(7) span {
        background: url("./img/congratulatory7.png") no-repeat center;
        background-size: 100%;
      }
      .congratulatory .swiper-slide:nth-child(7).active span {
        background: url("./img/congratulatory77.png") no-repeat center;
        background-size: 100%;
      }
      .congratulatory .swiper-slide:nth-child(8) span {
        background: url("./img/congratulatory8.png") no-repeat center;
        background-size: 100%;
      }
      .congratulatory .swiper-slide:nth-child(8).active span {
        background: url("./img/congratulatory88.png") no-repeat center;
        background-size: 100%;
      }
      .congratulatory .swiper-slide:nth-child(9) span {
        background: url("./img/congratulatory9.png") no-repeat center;
        background-size: 100%;
      }
      .congratulatory .swiper-slide:nth-child(9).active span {
        background: url("./img/congratulatory99.png") no-repeat center;
        background-size: 100%;
      }
    </style>
  </head>
  <body class="o-hidden" style="height: 100vh">
    <div class="w750 o-hidden">
      <div class="w750 p-r bg index">
        <div class="p-a text_time p-r">
          <div class="xwf_2021 animated fadeInRight fast"></div>
          <div
            class="xwf_2022 animated fadeInRight fast"
            style="animation-delay: 0.5s"
          ></div>
          <div
            class="xwf_2023 animated fadeInRight fast"
            style="animation-delay: 1s"
          ></div>
          <div
            class="xwf_2024 animated fadeInRight fast"
            style="animation-delay: 1.5s"
          ></div>
          <div
            class="xwf_2025 p-a animated fadeInRight fast"
            style="animation-delay: 2s"
          >
            <img src="./img/jinniu.png" alt="" />
          </div>
        </div>
        <div class="p-a niu">
          <img src="./img/niu.png" alt="" />
        </div>
        <div class="p-a text animated fadeInLeft fast delay-1s"></div>
      </div>

      <div class="w750 p-r box hidden">
        <div class="select">
          <!-- 牛 -->
          <div class="select_niu p-a">
            <img class="hidden" src="./img/one_show.png" alt="" />
            <img class="hidden" src="./img/two_show.png" alt="" />
            <img class="visib" src="./img/three_show.png" alt="" />
            <img class="hidden" src="./img/four_show.png" alt="" />
            <img class="hidden" src="./img/five_show.png" alt="" />
          </div>
          <!-- 确认选择 -->
          <div class="confirm p-a" style="top: 6.7rem; left: 2.5rem">
            <span>确认选择</span>
          </div>
          <!-- 切换形象 -->
          <div class="switch p-a d-flex">
            <div class="animated tada fast delay-1s">点击牛</div>
            <div class="animated tada fast delay-2s">切换</div>
            <div class="animated tada fast delay-3s">形象</div>
          </div>
          <!-- 云 -->
          <div class="xwf_cloud p-r">
            <div class="p-a left"></div>
            <div class="p-a right"></div>
          </div>
          <!-- 转盘 -->
          <div class="turntable p-r" style="top: 1rem">
            <div class="p-a one"><img src="./img/one.png" alt="" /></div>
            <div class="p-a two"><img src="./img/two.png" alt="" /></div>
            <div class="p-a three"><img src="./img/three.png" alt="" /></div>
            <div class="p-a four"><img src="./img/four.png" alt="" /></div>
            <div class="p-a five"><img src="./img/five.png" alt="" /></div>
          </div>
          <!-- 指针 -->
          <div class="pointer p-a"></div>
        </div>
      </div>

      <div class="congratulatory w750 p-r hidden">
        <div class="select">
          <!-- 牛 -->
          <div class="select_niu p-a o-hidden">
            <!-- Swiper -->
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide active"><span></span></div>
                <div class="swiper-slide"><span></span></div>
                <div class="swiper-slide"><span></span></div>
                <div class="swiper-slide"><span></span></div>
                <div class="swiper-slide"><span></span></div>
                <div class="swiper-slide"><span></span></div>
                <div class="swiper-slide"><span></span></div>
                <div class="swiper-slide"><span></span></div>
                <div class="swiper-slide"><span></span></div>
              </div>
            </div>
          </div>
          <!-- 上一步 预览海报 -->
          <div>
            <div class="confirm p-a prev">
              <span>上一步</span>
            </div>
            <div class="confirm p-a next">
              <span>预览海报</span>
            </div>
          </div>
          <!-- 云 -->
          <div class="xwf_cloud p-r">
            <div class="p-a left"></div>
            <div class="p-a right"></div>
          </div>
        </div>
      </div>

      <div class="w750 congratulatory1 hidden">
        <div class="select p-r">
          <div class="p-r">
            <img
              src="./img/one_show.png"
              alt=""
              class="p-a"
              style="width: 3rem; height: 4rem; top: 2.5rem; left: 2.3rem"
            />
            <div class="select_niu p-a p-r">
              <img class="p-a hidden" src="./img/niu_bg.png" />
              <img class="p-a hidden" src="./img/niu_bg.png" />
              <img class="p-a hidden" src="./img/niu_bg.png" />
              <img class="p-a hidden" src="./img/niu_bg.png" />
              <img class="p-a hidden" src="./img/niu_bg.png" />
              <img class="p-a hidden" src="./img/niu_bg.png" />
              <img class="p-a hidden" src="./img/niu_bg.png" />
              <img class="p-a hidden" src="./img/niu_bg.png" />
              <img class="p-a hidden" src="./img/niu_bg.png" />
              <img class="p-a hidden" src="./img/niu_bg.png" />
            </div>
          </div>
          <!-- 上一步下一步 -->
          <div>
            <div class="confirm p-a prev">
              <span>上一步</span>
            </div>
            <div class="confirm p-a next">
              <span>下一步</span>
            </div>
          </div>
          <!-- 颜色 -->
          <div class="select_color p-a d-flex flex-wrap" style="width: 6rem">
            <div class="div div1 mb10 blur">
              <div
                style="
                  background-color: #30e1e3;
                  transform: translate(0.1rem, 0.11rem);
                "
              ></div>
            </div>
            <div class="div div2 cyan">
              <div
                style="
                  background-color: #b9d9b2;
                  transform: translate(0.1rem, 0.11rem);
                "
              ></div>
            </div>
            <div class="div div3 green">
              <div
                style="
                  background-color: #1eb192;
                  transform: translate(0.1rem, 0.11rem);
                "
              ></div>
            </div>
            <div class="div div4 orange">
              <div
                style="
                  background-color: #ff8e32;
                  transform: translate(0.1rem, 0.11rem);
                "
              ></div>
            </div>
            <div class="div div5 violet">
              <div
                style="
                  background-color: #5c5d9d;
                  transform: translate(0.1rem, 0.11rem);
                "
              ></div>
            </div>
            <div class="div div6 yellow">
              <div
                style="
                  background-color: #f0e30e;
                  transform: translate(0.1rem, 0.11rem);
                "
              ></div>
            </div>
          </div>
          <!-- 云 -->
          <div class="xwf_cloud p-r">
            <div class="p-a left"></div>
            <div class="p-a right"></div>
          </div>
        </div>
      </div>

      <div class="congratulatory2 w750 hidden">
        <div class="select p-r">
          <!-- 牛 -->
          <div class="select_niu p-a">
            <img src="./img/two_show.png" alt="" />
          </div>
          <!-- 上一步下一步 -->
          <div>
            <div class="confirm p-a prev">
              <span>上一步</span>
            </div>
            <div class="confirm p-a next">
              <span>下一步</span>
            </div>
          </div>
          <!-- 颜色 -->
          <div class="select_color p-a d-flex">
            <div class="div div1">
              <div
                style="
                  background-color: #4875cf;
                  transform: translate(0.1rem, 0.11rem);
                "
              ></div>
            </div>
            <div class="div div2">
              <div
                style="
                  background-color: #f4f4f4;
                  transform: translate(0.1rem, 0.11rem);
                "
              ></div>
            </div>
            <div class="div div3">
              <div
                style="
                  background-color: #fdf1b3;
                  transform: translate(0.1rem, 0.11rem);
                "
              ></div>
            </div>
          </div>
          <!-- 云 -->
          <div class="xwf_cloud p-r">
            <div class="p-a left"></div>
            <div class="p-a right"></div>
          </div>
        </div>
      </div>

      <div class="congratulatory3 w750 p-r hidden">
        <div class="select">
          <!-- 牛 -->
          <div class="select_niu p-a">
            <img src="./img/three_show.png" alt="" />
          </div>
          <!-- 上一步下一步 -->
          <div>
            <div class="confirm p-a prev">
              <span>上一步</span>
            </div>
            <div class="confirm p-a next">
              <span>下一步</span>
            </div>
          </div>
          <!-- 颜色 -->
          <div class="select_color p-a d-flex">
            <div class="div div1">
              <div
                style="
                  background-color: #4875cf;
                  transform: translate(0.1rem, 0.11rem);
                "
              ></div>
            </div>
            <div class="div div2">
              <div
                style="
                  background-color: #f4f4f4;
                  transform: translate(0.1rem, 0.11rem);
                "
              ></div>
            </div>
            <div class="div div3">
              <div
                style="
                  background-color: #fdf1b3;
                  transform: translate(0.1rem, 0.11rem);
                "
              ></div>
            </div>
          </div>
          <!-- 云 -->
          <div class="xwf_cloud p-r">
            <div class="p-a left"></div>
            <div class="p-a right"></div>
          </div>
        </div>
      </div>

      <div class="congratulatory4 w750 hidden">
        <div class="select p-r">
          <!-- 牛 -->
          <div class="p-r">
            <img src="./img/four_show.png" alt="" class="p-a" />
            <div class="select_niu p-a p-r">
              <img class="p-a hidden" src="./img/niu_bg.png" />
              <img class="p-a hidden" src="./img/niu_bg.png" />
              <img class="p-a hidden" src="./img/niu_bg.png" />
              <img class="p-a hidden" src="./img/niu_bg.png" />
              <img class="p-a hidden" src="./img/niu_bg.png" />
              <img class="p-a hidden" src="./img/niu_bg.png" />
              <img class="p-a hidden" src="./img/niu_bg.png" />
              <img class="p-a hidden" src="./img/niu_bg.png" />
              <img class="p-a hidden" src="./img/niu_bg.png" />
              <img class="p-a hidden" src="./img/niu_bg.png" />
            </div>
          </div>
          <!-- 上一步下一步 -->
          <div>
            <div class="confirm p-a prev">
              <span>上一步</span>
            </div>
            <div class="confirm p-a next">
              <span>下一步</span>
            </div>
          </div>
          <!-- 颜色 -->
          <div class="select_color p-a d-flex flex-wrap" style="width: 6rem">
            <div class="div div1 mb10 blur">
              <div
                style="
                  background-color: #433ff4;
                  transform: translate(0.1rem, 0.11rem);
                "
              ></div>
            </div>
            <div class="div div2 green">
              <div
                style="
                  background-color: #6cc049;
                  transform: translate(0.1rem, 0.11rem);
                "
              ></div>
            </div>
            <div class="div div3 orange">
              <div
                style="
                  background-color: #ff6a00;
                  transform: translate(0.1rem, 0.11rem);
                "
              ></div>
            </div>
            <div class="div div4 pink">
              <div
                style="
                  background-color: #e74582;
                  transform: translate(0.1rem, 0.11rem);
                "
              ></div>
            </div>
            <div class="div div5 red">
              <div
                style="
                  background-color: #e2231a;
                  transform: translate(0.1rem, 0.11rem);
                "
              ></div>
            </div>
            <div class="div div6 violet">
              <div
                style="
                  background-color: #aa0adf;
                  transform: translate(0.1rem, 0.11rem);
                "
              ></div>
            </div>
          </div>
          <!-- 云 -->
          <div class="xwf_cloud p-r">
            <div class="p-a left"></div>
            <div class="p-a right"></div>
          </div>
        </div>
      </div>

      <div class="congratulatory5 w750 p-r hidden">
        <div class="select">
          <!-- 牛 -->
          <div class="select_niu p-a">
            <img src="./img/five_show.png" alt="" />
          </div>
          <!-- 上一步下一步 -->
          <div>
            <div class="confirm p-a prev">
              <span>上一步</span>
            </div>
            <div class="confirm p-a next">
              <span>下一步</span>
            </div>
          </div>
          <!-- 颜色 -->
          <div class="select_color p-a d-flex">
            <div class="div div1">
              <div
                style="
                  background-color: #4875cf;
                  transform: translate(0.1rem, 0.11rem);
                "
              ></div>
            </div>
            <div class="div div2">
              <div
                style="
                  background-color: #f4f4f4;
                  transform: translate(0.1rem, 0.11rem);
                "
              ></div>
            </div>
            <div class="div div3">
              <div
                style="
                  background-color: #fdf1b3;
                  transform: translate(0.1rem, 0.11rem);
                "
              ></div>
            </div>
          </div>
          <!-- 云 -->
          <div class="xwf_cloud p-r">
            <div class="p-a left"></div>
            <div class="p-a right"></div>
          </div>
        </div>
      </div>

      <div
        class="html2Image p-f"
        style="
          background-color: rgba(0, 0, 0, 0.5);
          z-index: 13;
          width: 100%;
          height: 100%;
        "
      >
        <div style="margin: 1.3rem 0 0 0.8rem">
          <img id="html2Image" src="" alt="" style="width: 90%; height: 90%" />
        </div>
        <button
          class="btn"
          style="
            position: absolute;
            top: 0.7rem;
            right: 0.3rem;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.2);
            width: 1.2rem;
          "
        >
          ×
        </button>
      </div>

      <div class="preview1 w750 hidden" id="view1">
        <div class="select p-r">
          <div class="preview_text"><img src="" alt="" /></div>
          <div class="preview_url">
            <img src="" alt="" class="p-a" />
          </div>
          <div class="p-a" style="top: 11.5rem">
            <button class="no">返回</button>
            <button class="ok">确认生成</button>
          </div>
          <img src="./img/ewm.png" alt="" class="ewm p-a hidden" />
        </div>
      </div>
      <div class="preview2 preview w750 hidden" id="view2">
        <div class="select p-r">
          <div class="preview_text">
            <img src="" alt="" />
          </div>
          <div class="preview_url"><img src="" alt="" class="p-a" /></div>
          <div class="p-a" style="top: 11.5rem">
            <button class="no">返回</button>
            <button class="ok">确认生成</button>
          </div>
          <img src="./img/ewm.png" alt="" class="ewm p-a" />
        </div>
      </div>
      <div class="preview3 preview w750 hidden" id="view3">
        <div class="select p-r">
          <div class="preview_text"><img src="" alt="" /></div>
          <div class="preview_url"><img src="" alt="" class="p-a" /></div>
          <div class="p-a" style="top: 11.5rem">
            <button class="no">返回</button>
            <button class="ok">确认生成</button>
          </div>
          <img src="./img/ewm.png" alt="" class="ewm p-a" />
        </div>
      </div>
      <div class="preview4 preview w750 hidden" id="view4">
        <div class="select p-r">
          <img
            class="p-a"
            src="./img/preview4_bottom.png"
            alt=""
            style="width: 7.5rem; bottom: -2rem; left: 0.5rem"
          />
          <div class="preview_text"><img src="" alt="" /></div>
          <div
            class="preview_url p-a"
            style="top: 4.5rem; transform: scale(2.5)"
          >
            <img src="" alt="" class="p-a" />
            <img src="" alt="" class="p-a" />
            <img src="" alt="" class="p-a" />
            <img src="" alt="" class="p-a" />
            <img src="" alt="" class="p-a" />
            <img src="" alt="" class="p-a" />
            <img src="" alt="" class="p-a" />
            <img src="" alt="" class="p-a" />
            <img src="" alt="" class="p-a" />
          </div>
          <div class="p-a" style="top: 11.5rem">
            <button class="no">返回</button>
            <button class="ok">确认生成</button>
          </div>
          <img src="./img/ewm.png" alt="" class="ewm p-a" />
        </div>
      </div>
      <div class="preview5 preview w750 hidden" id="view5">
        <div class="select p-r">
          <div class="preview_text">
            <img src="" alt="" />
          </div>
          <div
            class="preview_url p-a"
            style="top: 6rem; left: 1.5rem; transform: scale(1.5)"
          >
            <img src="" alt="" class="p-a" />
            <img src="" alt="" class="p-a" />
            <img src="" alt="" class="p-a" />
            <img src="" alt="" class="p-a" />
            <img src="" alt="" class="p-a" />
            <img src="" alt="" class="p-a" />
            <img src="" alt="" class="p-a" />
            <img src="" alt="" class="p-a" />
            <img src="" alt="" class="p-a" />
          </div>
          <div class="p-a" style="top: 11.5rem">
            <button class="no">返回</button>
            <button class="ok">确认生成</button>
          </div>
          <img src="./img/ewm.png" alt="" class="ewm p-a" />
        </div>
      </div>

      <!-- 提示 -->
      <div
        class="tit hidden p-f"
        style="
          bottom: 6rem;
          left: 2rem;
          width: 3rem;
          height: 1rem;
          background-color: #909090;
          border-radius: 1rem;
          text-align: center;
          line-height: 1rem;
          color: #fff;
        "
      >
        请选择颜色
      </div>
    </div>

    
    <audio
      id="media"
      class="musicControl-active"
      src="1.mp3"
      loop="loop"
    ></audio>
    <img
      id="music-icon"
      class="musicControl-active"
      src="music.png"
      alt=""
      style="position: relative; top: -15rem; left: 0"
    />
    <style>
      .musicControl-active {
        animation: rotataZ 1.2s linear infinite;
        -webkit-animation: rotataZ 1.2s linear infinite;
      }
      @keyframes rotataZ {
        0% {
          transform: rotateZ(0);
        }
        50% {
          transform: rotateZ(180deg);
        }
        100% {
          transform: rotateZ(360deg);
        }
      }
      @-webkit-keyframes rotataZ {
        0% {
          transform: rotateZ(0);
        }
        50% {
          transform: rotateZ(180deg);
        }
        100% {
          transform: rotateZ(360deg);
        }
      }
    </style>
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script src="./js/html2canvas.min.js"></script>
    <script src="./js/siper.min.js"></script>

    <script>
      var swiper = new Swiper(".swiper-container", {
        direction: "vertical",
        slidesPerView: "auto",
        mousewheel: true,
        freeMode: true,
        observer: true, //修改swiper自己或子元素时,自动初始化swiper
        observeParents: true, //修改swiper的父元素时,自动初始化swiper
        observeSlideChildren: true,
      });

      $(function () {
        let arr = ["blur", "cyan", "green", "orange", "violet", "yellow"];
        let ax = [];
        let activeText = "";
        let arr1 = ["blur", "green", "orange", "pink", "red", "violet"];
        let textIndex = [];
        let imgUrl = "";
        let imgUrl1 = [];
        /* 公共 */

        /* 鼠标滑动 */
        $(".index").bind("touchstart", function (e) {
          (startX = e.originalEvent.changedTouches[0].pageX),
            (startY = e.originalEvent.changedTouches[0].pageY);
        });
        $(".index").bind("touchmove", function (e) {
          //获取滑动屏幕时的X,Y
          (endX = e.originalEvent.changedTouches[0].pageX),
            (endY = e.originalEvent.changedTouches[0].pageY);
          //获取滑动距离
          distanceX = endX - startX;
          distanceY = endY - startY;
          //判断滑动方向
          if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX < -50) {
            $(".index").addClass("hidden");
            $(".box").removeClass("hidden").addClass("visit");
          }
        });

        // 旋转切换
        function pointer(d, j) {
          $(".pointer").css("transform", "rotate(" + d + "deg)");
          $(".pointer").css("transition", "0.2s all");
          $(".box .confirm").click((e) => {
            e.stopPropagation();
            $(".box").addClass("hidden");
            $(".congratulatory" + j + "")
              .removeClass("hidden")
              .siblings()
              .addClass("hidden");
          });
        }

        // 切换类名换页面
        function toggleShow(a) {
          $(".congratulatory" + a + " .next").click((e) => {
            e.stopPropagation();
            $(".congratulatory" + a + "")
              .addClass("hidden")
              .siblings()
              .removeClass("hidden");
            $(".congratulatory")
              .removeClass("hidden")
              .siblings()
              .addClass("hidden");
            $(".congratulatory .prev").click((e) => {
              e.stopPropagation();
              $(".congratulatory")
                .addClass("hidden")
                .siblings()
                .removeClass("hidden");
              $(".congratulatory" + a + "")
                .removeClass("hidden")
                .siblings()
                .addClass("hidden");
            });
          });
        }
        // 切换颜色
        function toggleColor(i, number, color) {
          $(".congratulatory" + i + " .select_niu img").attr(
            "src",
            "./img/" + number + "_show_" + color + ".png"
          );
          imgUrl = "./img/" + number + "_show_" + color + ".png";
        }

        function previewBox(b, n) {
          $(".congratulatory .next").click((e) => {
            e.stopPropagation();
            $(".preview" + b + " .preview_text img").attr(
              "src",
              "./img/" + n + "_text1.png"
            );
            $(".ewm").addClass("hidden");
            $(".congratulatory").addClass("hidden");
            $(".preview" + b + "")
              .removeClass("hidden")
              .siblings()
              .addClass("hidden");
            $.each(textIndex, (index) => {
              $(".preview" + b + " .preview_text img").attr(
                "src",
                "./img/" + n + "_text" + (textIndex[index] + 1) + ".png"
              );
            });

            $(".preview" + b + " .preview_url img").attr("src", imgUrl);
            $(".preview" + b + " .ok").click((r) => {
              e.stopPropagation();
              $(".ewm").removeClass("hidden");
              $(".preview" + b + " button").addClass("hidden");
              $(".html2Image").removeClass("hidden");
              html2canvas(document.getElementById("view" + b + "")).then(
                function (canvas) {
                  var dataUrl = canvas.toDataURL();
                  $("#html2Image").attr("src", dataUrl);
                }
              );
            });
            $(".preview" + b + " .no").click((e) => {
              e.stopPropagation();
              $(".preview" + b + "").addClass("hidden");
              $(".congratulatory").removeClass("hidden");
            });
            $(".btn").click(() => {
              $(".html2Image").addClass("hidden");
              $(".preview" + b + "").removeClass("hidden");
              $(".ewm").addClass("hidden");
              $(".preview" + b + " button").removeClass("hidden");
            });
          });
        }
        function previewBox1(c, f) {
          $(".congratulatory .next").click(function () {
            $(".congratulatory").addClass("hidden");
            $(".preview" + c + "")
              .removeClass("hidden")
              .siblings()
              .addClass("hidden");
            $(".ewm").addClass("hidden");
            $.each($(".preview" + c + " .preview_url img"), function (idx) {
              $(this).attr("src", imgUrl1[idx]);
            });
            $.each(textIndex, (index) => {
              $(".preview" + c + " .preview_text img").attr(
                "src",
                "./img/" + f + "_text" + (textIndex[index] + 1) + ".png"
              );
            });
            $(".preview" + c + " .ok").click(function () {
              $(".ewm").removeClass("hidden");
              $(".preview" + c + " button").addClass("hidden");
              $(".html2Image").removeClass("hidden");
              html2canvas(document.getElementById("view" + c + "")).then(
                function (canvas) {
                  var dataUrl = canvas.toDataURL();
                  $("#html2Image").attr("src", dataUrl);
                }
              );
            });
            $(".preview" + c + " .no").click(function () {
              $(".preview" + c + "").addClass("hidden");
              $(".congratulatory").removeClass("hidden");
            });
            $(".btn").click(function () {
              $(".html2Image").addClass("hidden");
              $(".preview" + c + "").removeClass("hidden");
              $(".ewm").addClass("hidden");
              $(".preview" + c + " button").removeClass("hidden");
            });
          });
        }

        // 第二块
        $(".box .turntable div").click(function () {
          $(".box .select_niu img").hide().eq($(this).index()).show();
        });
        $(".box .confirm").click((e) => {
          e.stopPropagation();
          $(".box").addClass("hidden");
          $(".congratulatory3")
            .removeClass("hidden")
            .siblings()
            .addClass("hidden");
        });

        $(".one").click((e) => {
          e.stopPropagation();
          pointer(-80, "1");
        });
        $(".two").click((e) => {
          e.stopPropagation();
          pointer(-45, "2");
        });
        $(".three").click((e) => {
          e.stopPropagation();
          pointer(0, "3");
        });
        $(".four").click((e) => {
          e.stopPropagation();
          pointer(55, "4");
        });
        $(".five").click((e) => {
          e.stopPropagation();
          pointer(80, "5");
        });
        // 第三块

        $(".congratulatory1 .div").click(function () {
          $(this).addClass("active").siblings().removeClass("active");
        });

        $(".congratulatory1 .select_niu img").removeClass("hidden");
        $(".congratulatory1 .next").click(function () {
          let index = $(".congratulatory1 .div.active").index();
          if ($(".congratulatory1 .select_color .div").hasClass("active")) {
            $(".congratulatory1 .select_color .div").removeClass("active");
            ax.push($(".congratulatory1 .select_color .active").index());
            if (arr[index] == undefined) {
              console.log(1);
            } else {
              if (imgUrl1.length < 9) {
                imgUrl1.push(
                  "./img/one_show_" + arr[index] + ax.length + ".png"
                );
                var new_arr = [];
                for (var i = 0; i < imgUrl1.length; i++) {
                  var items = imgUrl1[i];
                  //判断元素是否存在于new_arr中,如果不存在则插入到new_ar中
                  if ($.inArray(items, new_arr) == -1) {
                    new_arr.push(items);
                  }
                }
              }
            }
            if (ax.length >= 9) {
              $(".congratulatory1").addClass("hidden");
              $(".congratulatory").removeClass("hidden");
              ax.pop();
            }
            previewBox1(4, "one");
            $(".congratulatory .prev").click((e) => {
              e.stopPropagation();
              $(".congratulatory").addClass("hidden");
              $(".congratulatory1").removeClass("hidden");
            });
          } else {
            $(".tit").removeClass("hidden");
            setTimeout(() => {
              $(".tit").addClass("hidden");
            }, 1000);
          }
        });
        $.each(arr, (q) => {
          $(".congratulatory1 .select_color ." + arr[q] + "").click(
            function () {
              $(".congratulatory1 .select_niu img")
                .eq(ax.length + 1)
                .attr(
                  "src",
                  "./img/one_show_" + arr[q] + "" + (ax.length + 1) + ".png"
                );
            }
          );
        });
        $(".congratulatory1 .prev").click(function () {
          if (
            $(".congratulatory1 .select_niu img")
              .eq(ax.length + 1)
              .attr("src", "./img/niu_bg.png")
          ) {
            ax.pop();
            imgUrl1.pop();
            console.log(ax);
          } else {
            $(".congratulatory1 .select_niu img")
              .eq(ax.length + 2)
              .attr("src", "./img/niu_bg.png");
          }
          let imgUr = $(".congratulatory1 .select_niu img").eq(1).attr("src");
          if (imgUr == "./img/niu_bg.png") {
            $(".congratulatory1").addClass("hidden");
            $(".box").removeClass("hidden");
          }
        });

        $(".swiper-slide").eq(0).addClass("active");
        $(".swiper-slide").click(function () {
          textIndex.push($(this).index());
          $(this).addClass("active").siblings().removeClass("active");
        });

        $(".congratulatory2 .prev").click(function () {
          $(".congratulatory2").addClass("hidden");
          $(".box").removeClass("hidden");
        });
        $(".congratulatory2 .next").click(function () {
          if ($(".congratulatory2 .div").hasClass("active")) {
            console.log(1);
          } else {
            $(".tit").removeClass("hidden");
            setTimeout(() => {
              $(".tit").addClass("hidden");
            }, 1000);
          }
        });
        $(".congratulatory2 .div").click(function () {
          $(this).addClass("active").siblings().removeClass("active");
        });
        $(".congratulatory2 .div1").click(function () {
          toggleColor("2", "two", "blur");
          toggleShow("2");
          previewBox(1, "two");
        });
        $(".congratulatory2 .div2").click(function () {
          toggleColor("2", "two", "silver");
          toggleShow("2");
          previewBox(1, "two");
        });
        $(".congratulatory2 .div3").click(function () {
          toggleColor("2", "two", "gilding");
          toggleShow("2");
          previewBox(1, "two");
        });

        $(".congratulatory3 .next").click(function () {
          if ($(".congratulatory3 .div").hasClass("active")) {
            console.log(1);
          } else {
            $(".tit").removeClass("hidden");
            setTimeout(() => {
              $(".tit").addClass("hidden");
            }, 1000);
          }
        });
        $(".congratulatory3 .div").click(function () {
          $(this).addClass("active").siblings().removeClass("active");
        });
        $(".congratulatory3 .prev").click(function () {
          $(".congratulatory3").addClass("hidden");
          $(".box").removeClass("hidden");
        });
        $(".congratulatory3 .div1").click(function () {
          toggleColor("3", "three", "blur");
          toggleShow("3");
          previewBox(2, "three");
        });
        $(".congratulatory3 .div2").click(function () {
          toggleColor("3", "three", "silver");
          toggleShow("3");
          previewBox(2, "three");
        });
        $(".congratulatory3 .div3").click(function () {
          toggleColor("3", "three", "gilding");
          toggleShow("3");
          previewBox(2, "three");
        });

        // // 第三块
        $(".congratulatory4 .div").click(function () {
          $(this).addClass("active").siblings().removeClass("active");
          $(".tit").addClass("hidden");
        });
        $(".congratulatory4 .select_niu img").removeClass("hidden");
        $(".congratulatory4 .next").click(function () {
          let index = $(".congratulatory4 .div.active").index();
          if ($(".congratulatory4 .select_color div").hasClass("active")) {
            ax.push($(".congratulatory4 .select_color .active").index());
            $(".congratulatory4 .select_color div").removeClass("active");
            console.log(ax);
          } else {
            $(".tit").removeClass("hidden");
          }
          if (ax.length == 9) {
            let index = $(".congratulatory4 .div.active").index();
            $(".congratulatory4").addClass("hidden");
            $(".congratulatory").removeClass("hidden");
          }
          imgUrl1.push("./img/four_show_" + arr1[index] + ax.length + ".png");
          previewBox1(5, "four");
          $(".congratulatory .prev").click(function () {
            $(".congratulatory").addClass("hidden");
            $(".congratulatory4").removeClass("hidden");
          });
        });
        $.each(arr1, function (m) {
          $(".congratulatory4 .select_color ." + arr1[m] + "").click(
            function () {
              $(".congratulatory4 .select_niu img")
                .eq(ax.length + 1)
                .attr(
                  "src",
                  "./img/four_show_" + arr1[m] + "" + (ax.length + 1) + ".png"
                );
            }
          );
        });
        $(".congratulatory4 .prev").click(function () {
          if (
            $(".congratulatory4 .select_niu img")
              .eq(ax.length + 1)
              .attr("src", "./img/niu_bg.png")
          ) {
            ax.pop();
          } else {
            $(".congratulatory4 .select_niu img")
              .eq(ax.length + 2)
              .attr("src", "./img/niu_bg.png");
          }
          let imgUr = $(".congratulatory4 .select_niu img").eq(1).attr("src");
          if (imgUr == "./img/niu_bg.png") {
            $(".congratulatory4").addClass("hidden");
            $(".box").removeClass("hidden");
          }
        });

        $(".congratulatory5 .next").click(function () {
          if ($(".congratulatory5 .div").hasClass("active")) {
            console.log(1);
          } else {
            $(".tit").removeClass("hidden");
            setTimeout(() => {
              $(".tit").addClass("hidden");
            }, 1000);
          }
        });
        $(".congratulatory5 .div").click(function () {
          $(this).addClass("active").siblings().removeClass("active");
        });
        $(".congratulatory5 .prev").click(function () {
          $(".congratulatory5").addClass("hidden");
          $(".box").removeClass("hidden");
        });
        $(".congratulatory5 .div1").click(function () {
          toggleColor("5", "five", "blur");
          toggleShow("5");
          previewBox(3, "five");
        });
        $(".congratulatory5 .div2").click(function () {
          toggleColor("5", "five", "silver");
          toggleShow("5");
          previewBox(3, "five");
        });
        $(".congratulatory5 .div3").click(function () {
          toggleColor("5", "five", "gilding");
          toggleShow("5");
          previewBox(3, "five");
        });
      });
    </script>
    <script type="text/javascript">
      var dataForWeixin = {
        appId: "<%=appid%>",
        MsgImg: "http://lx26.sunnyby.cn/2021-4-8/slt.jpg",
        TLImg: "http://lx26.sunnyby.cn/2021-4-8/slt.jpg",
        url: "http://lx26.sunnyby.cn/2021-4-8/index.aspx",
        title: "春节", // 分享后的标题,
        desc: "春节牛", // 分享后的描述信息
        timestamp: "<%=timestamp%>",
        nonceStr: "<%=nonceStr%>",
        signature: "<%=signature%>",
        jsApiList: [
          "onMenuShareTimeline",
          "onMenuShareAppMessage",
          "onMenuShareQQ",
          "onMenuShareWeibo",
        ],
        fakeid: "",
        callback: function () {},
      };
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: dataForWeixin.appId, // 必填,公众号的唯一标识
        timestamp: dataForWeixin.timestamp, // 必填,生成签名的时间戳
        nonceStr: dataForWeixin.nonceStr, // 必填,生成签名的随机串
        signature: dataForWeixin.signature, // 必填,签名,见附录1
        jsApiList: dataForWeixin.jsApiList, // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
      });
      wx.ready(function () {
        //在此输入各种API
        //分享到朋友圈
        wx.onMenuShareTimeline({
          title: dataForWeixin.title, // 分享标题
          link: dataForWeixin.url, // 分享链接
          desc: dataForWeixin.desc, // 分享描述
          imgUrl: dataForWeixin.MsgImg, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          },
        });
        //分享给朋友
        wx.onMenuShareAppMessage({
          title: dataForWeixin.title, // 分享标题
          desc: dataForWeixin.desc, // 分享描述
          link: dataForWeixin.url, // 分享链接
          imgUrl: dataForWeixin.TLImg, // 分享图标
          type: "", // 分享类型,music、video或link,不填默认为link
          dataUrl: "", // 如果type是music或video,则要提供数据链接,默认为空
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          },
        });
        //QQ
        wx.onMenuShareQQ({
          title: dataForWeixin.title, // 分享标题
          desc: dataForWeixin.desc, // 分享描述
          link: dataForWeixin.url, // 分享链接
          imgUrl: dataForWeixin.MsgImg, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          },
        });
        //QQ微博
        wx.onMenuShareWeibo({
          title: dataForWeixin.title, // 分享标题
          desc: dataForWeixin.desc, // 分享描述
          link: dataForWeixin.url, // 分享链接
          imgUrl: dataForWeixin.TLImg, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          },
        });
        // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,
        //所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
      });
      wx.error(function (res) {
        //alert(res);
        // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
      });
    </script>
    <script>
      // 背景音乐
      $(function () {
        var Hmedia = document.getElementById("media");
        // Hmedia.play();
        document.addEventListener(
          "WeixinJSBridgeReady",
          function () {
            Hmedia.load();
            Hmedia.play();
            Hmedia.loop = false;
          },
          false
        );
        //循环播放
        Hmedia.onended = function () {
          Hmedia.load();
          Hmedia.play();
        };
        wx.error(function (res) {
          //alert(res.errMsg);
        });
        //music icon
        $("#music-icon").click(function () {
          var _this = $(this);
          if (_this.hasClass("musicControl-active")) {
            _this.removeClass("musicControl-active");
            // Hmedia.load();
            Hmedia.pause();
          } else {
            _this.addClass("musicControl-active");
            Hmedia.load();
            Hmedia.play();
          }
        });
      });
    </script>
  </body>
</html>

  

标签:function,img,removeClass,春节,小游戏,hidden,h5,click,addClass
来源: https://www.cnblogs.com/xiewangfei123/p/14654533.html