scratch
/
index.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>富力春交荟</title>
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/Swiper/4.5.0/css/swiper.min.css"
    />
    <link rel="stylesheet" href="./css/style.css" />
    <style>
      html,
      body {
        max-width: 750px;
        height: 100%;
        margin: 0 auto;
      }

      body {
        background-color: #f5f5f5;
      }

      .swiper-container {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        width: 100%;
        padding: 15px 10px;
        background-color: #f5f5f5;
      }

      .por {
        position: relative;
      }

      .pic1 {
        width: 100%;
      }

      .rule {
        position: absolute;
        bottom: 3vw;
        left: 3vw;
        font-size: 0.8rem;
        text-decoration: underline;
        color: #fff;
      }

      .ticket {
        position: relative;
        margin-top: 4vw;
        width: 100%;
      }

      .ticket img {
        width: 100%;
      }

      .click {
        position: absolute;
        width: 28%;
        height: 100%;
        right: 0;
        top: 0;
      }

      .container {
        padding: 10px;
        width: 100%;
        border-radius: 10px;
        background-color: #ffffff;
        margin-top: 8vw;
        position: relative;
      }

      .pic {
        width: 100%;
      }

      .tip {
        color: #f1a261;
        text-align: center;
      }

      .btn {
        border: 1px solid #f1a261;
        color: #f1a261;
        border-radius: 30px;
        width: 60vw;
        text-align: center;
        line-height: 10vw;
        margin: 0 auto;
      }

      .cover {
        position: absolute;
        width: 28.5vw;
        z-index: 2;
      }

      .cover1,
      .cover4,
      .cover7 {
        left: 2.2vw;
      }

      .cover2,
      .cover5,
      .cover8 {
        left: 33.2vw;
      }

      .cover3,
      .cover6,
      .cover9 {
        left: 64.2vw;
      }

      .cover1,
      .cover2,
      .cover3 {
        top: 2.5vw;
      }

      .cover4,
      .cover5,
      .cover6 {
        top: 28.5vw;
      }

      .cover7,
      .cover8,
      .cover9 {
        top: 53.5vw;
      }

      .line {
        position: absolute;
        background-color: #fff;
        z-index: 3;
      }

      .line-str {
        width: 3.2vw;
        height: 76vw;
        top: 2.3vw;
      }

      .str1 {
        left: 30vw;
      }

      .str2 {
        left: 61.5vw;
      }

      .line-scr {
        width: 90.7vw;
        height: 3.2vw;
        left: 2.2vw;
      }

      .scr1 {
        top: 27vw;
      }

      .scr2 {
        top: 52.5vw;
      }

      .bg1 {
        background-image: url(./img/p11.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .my-click {
        /* background-color: #222222; */
        position: absolute;
        z-index: 2;
      }

      .click1,
      .click2,
      .click3 {
        width: 38vw;
        height: 12vw;
        bottom: 22vw;
        right: 10vw;
      }

      .click1 {
        right: 10vw;
      }

      .click2 {
        right: 51vw;
      }

      .bg2 {
        background-image: url(./img/p12.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .click3 {
        bottom: 29vw;
        right: 31vw;
      }

      .bg3 {
        background-image: url(./img/p13.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .click4,
      .click5,
      .click6,
      .click7 {
        width: 31vw;
        height: 56vw;
      }

      .click4 {
        top: 39vw;
        left: 15vw;
      }
      .click5 {
        top: 39vw;
        left: 53vw;
      }
      .click6 {
        top: 99vw;
        left: 15vw;
      }
      .click7 {
        top: 99vw;
        left: 53vw;
      }
    </style>
  </head>

  <body>
    <div class="swiper-container">
      <div class="swiper-wrapper">
<<<<<<< HEAD
        <div class="swiper-slide stop-swiping">
=======
        <!-- 首页 -->
        <div class="swiper-slide stop-swiping bg1">
          <div class="my-click click1"></div>
          <div class="my-click click2"></div>
        </div>
        <!-- 规则 -->
        <div class="swiper-slide stop-swiping bg2">
          <div class="my-click click3"></div>
        </div>
        <!-- 选择地点 -->
        <div class="swiper-slide stop-swiping bg3">
          <div
            class="my-click click4"
            onclick="mySwiper.slideNext();item(3)"
          ></div>
          <div
            class="my-click click5"
            onclick="mySwiper.slideNext();item(4)"
          ></div>
          <div
            class="my-click click6"
            onclick="mySwiper.slideNext();item(2)"
          ></div>
          <div
            class="my-click click7"
            onclick="mySwiper.slideNext();item(5)"
          ></div>
        </div>

        <!-- <div class="swiper-slide stop-swiping">
>>>>>>> d94fb0f6598fc69090eab5bc9f09e728f0e3dc22
          <div class="por">
            <img src="./img/p1.png" class="pic1" />
            <span class="rule">活动规则</span>
          </div>
          <div class="ticket">
            <img src="./img/ticket1.png" />
            <div class="click" onclick="mySwiper.slideNext();item(3)"></div>
          </div>
          <div class="ticket">
            <img src="./img/ticket2.png" />
            <div class="click" onclick="mySwiper.slideNext();item(4)"></div>
          </div>
          <div class="ticket">
            <img src="./img/ticket3.png" />
            <div class="click" onclick="mySwiper.slideNext();item(2)"></div>
          </div>
          <div class="ticket">
            <img src="./img/ticket4.png" />
            <div class="click" onclick="mySwiper.slideNext();item(5)"></div>
          </div>
        </div>
        <div class="swiper-slide stop-swiping">
          <div class="por">
            <img src="./img/p1.png" class="pic1" />
            <span class="rule">活动规则</span>
          </div>
          <div class="container">
            <img class="pic" src="./img/p2.jpg" />
            <img src="./img/cover.png" id="cover1" class="cover cover1" />
            <img src="./img/cover.png" id="cover2" class="cover cover2" />
            <img src="./img/cover.png" id="cover3" class="cover cover3" />
            <img src="./img/cover.png" id="cover4" class="cover cover4" />
            <img src="./img/cover.png" id="cover5" class="cover cover5" />
            <img src="./img/cover.png" id="cover6" class="cover cover6" />
            <img src="./img/cover.png" id="cover7" class="cover cover7" />
            <img src="./img/cover.png" id="cover8" class="cover cover8" />
            <img src="./img/cover.png" id="cover9" class="cover cover9" />
            <div class="line line-str str1"></div>
            <div class="line line-str str2"></div>
            <div class="line line-scr scr1"></div>
            <div class="line line-scr scr2"></div>
          </div>
          <div id="me" style="display: none">
            <p class="tip">每日可刮3次,您还剩余<span id="time">3</span>次</p>
            <div id="btn" class="btn" style="display: none">邀请好友助力</div>
          </div>
          <div id="firend" style="display: none">
            <p id="tip1" class="tip">
              帮助好友刮卡，您有<span id="time">1</span>次机会
            </p>
            <div id="btn1" class="btn" style="display: none">我也要参与</div>
          </div>
          <div id="finish" style="display: none">
            <p class="tip">恭喜，已挂完所有卡片</p>
            <div class="btn">立即领取大奖</div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/Swiper/4.5.0/js/swiper.min.js"></script>
  <script src="./js/jquery.eraser.js"></script>
  <script>
    var sDisable = false
    var mySwiper = new Swiper('.swiper-container', {
      effect: 'fade',
      noSwiping: true,
      noSwipingClass: 'stop-swiping'
    })

    $('.click1').click(function() {
      mySwiper.slideTo(1)
    })
    $('.click2').click(function() {
      mySwiper.slideTo(1)
    })
    $('.click3').click(function() {
      mySwiper.slideTo(2)
    })

    // 状态
    var state = ['me', 'firend', 'finish'],
      isState = 0

    function aState(state) {
      if (state == 'me') {
        $('#me').show()
      }
      if (state == 'firend') {
        $('#firend').show()
      }
      if (state == 'finish') {
        $('.cover').remove()
        $('.line').remove()
        $('#finish').show()
      }
    }
    aState(state[isState])

    // item:点击的项目
    function item(item) {
      $('.pic').attr('src', './img/p' + item + '.jpg')
    }

    // 可刮次数
    var time = 1
    $('#time').html(time)
    // 之前刮过的
    var show = ['cover1', 'cover4', 'cover7']
    if (show) {
      show.forEach(function(e) {
        $('#' + e)
          .removeClass('cover')
          .hide()
      })
    }

    // 当前刮过的
    var cur_show = []
    var bid
    $('.cover').eraser({
      completeRatio: 0.5,
      size: 10,
      completeFunction: function(e) {
        console.log(e)
        time -= 1
        console.log(time)
        $('#time').html(time)
        // console.log(this.canvas[0])
        bid = $(this.canvas[0]).attr('id')
        // console.log(bid)
        cur_show.push(bid)
        console.log(cur_show)
        $('#' + bid).eraser('remove')
        // 次数为0时候禁止擦除
        if (time == 0) {
          $('#cover1').eraser('disable')
          $('#cover2').eraser('disable')
          $('#cover3').eraser('disable')
          $('#cover4').eraser('disable')
          $('#cover5').eraser('disable')
          $('#cover6').eraser('disable')
          $('#cover7').eraser('disable')
          $('#cover8').eraser('disable')
          $('#cover9').eraser('disable')
          $('#tip1').html('已助力好友，参与活动和朋友一样有机会获得大奖哦')
          $('#btn').fadeIn()
          $('#btn1').fadeIn()
        }
      },
      progressFunction(e) {
        // console.log(Math.round(e * 100) + '%')
      }
    })
  </script>
</html>