画中画

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=750, user-scalable=no">
  <style>
    html,
    body, ul, li {
        margin: 0;
        padding: 0;
        user-select: none;
        list-style: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    canvas {
        user-select: none;
        -webkit-touch-callout: none !important
    }

    .cover {
        position: absolute;
        left: 0;
        top: 0;
        width: 750px;
        height: 1206px;
        z-index: 99;
        overflow: hidden;
        background: url("http://static.ws.126.net/f2e/ent/ent_painting2016/images/cover_bg.jpg") no-repeat center right;
    }

    .cover .year2016 {
        opacity: 0;
        position: absolute;
        left: 230px;
        top: 90px;
        width: 80px;
        height: 250px;
        background: url('http://static.ws.126.net/f2e/ent/ent_painting2016/images/cover.png') no-repeat 0 -135px;
        -webkit-transition: transform 3s, opacity 1s
    }

    .cover .title, .cover .title_bg {
        width: 725px;
        height: 1206px;
        position: absolute;
        left: 0;
        top: 0;
        background-size: cover
    }

    .cover .yu {
        position: absolute;
        left: 657px;
        top: 377px;
        width: 60px;
        height: 130px;
        background: url("http://static.ws.126.net/f2e/ent/ent_painting2016/images/cover.png") no-repeat -235px 0;
        -webkit-transform-origin: 50% 0;
        -webkit-animation: rotate_yuan 3s ease-in-out infinite
    }

    .cover.active .year2016 {
        -webkit-transform: translate(0, 50px);
        opacity: 1
    }

    .operating {
        position: fixed;
        left: 50%;
        top: 20%;
        transform: translate(-50%, 0);
        display: none;
    }

    .operating li {
        padding: 30px 60px;
        font-size: 50px;
        letter-spacing: 10px;
        color: white;
        background: darkred;
        margin-bottom: 80px;
        border-radius: 20px;
    }

    .start {
        -webkit-touch-callout: none !important;
        user-select: none;
        position: absolute;
        left: 50%;
        bottom: 50px;
        z-index: 99;
        width: 140px;
        height: 140px;
        margin-left: -57px;
        background: url('http://static.ws.126.net/f2e/ent/ent_painting2016/images/cover.png') -806px 26px;
        -webkit-animation: start1 5s ease-in-out infinite
    }

    .start:after {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 140px;
        height: 140px;
        background: url('http://static.ws.126.net/f2e/ent/ent_painting2016/images/cover.png') -670px 0;
        -webkit-animation: start 1s ease-in-out infinite;
        -webkit-transform-origin: 50% 100%
    }

    .start:active:after {
        -webkit-transform: scale(0.95);
        -webkit-animation: none
    }

    @-webkit-keyframes start {
        0% {
            -webkit-transform: scale(1)
        }
        50% {
            -webkit-transform: scale(0.95)
        }
        100% {
            -webkit-transform: scale(1)
        }
    }

    @-webkit-keyframes rotate_yuan {
        0% {
            -webkit-transform: rotate(-4deg)
        }
        50% {
            -webkit-transform: rotate(10deg)
        }
        100% {
            -webkit-transform: rotate(-4deg)
        }
    }

    .loading {
        position: fixed;
        width: 100vw;
        height: 100vh;
        background: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 100;
        font-size: 32px;
    }

    .toast {
        position: fixed;
        background: #ffffff;
        z-index: 100;
        text-align: center;
        border-radius: 20px;
        font-size: 32px;
        left: 50%;
        top: 50%;
        padding: 20px 40px;
        transform: translate(-50%, -50%);
        display: none;
    }

  </style>
</head>

<body>
<div class="loading">加载中...</div>
<canvas width="750" height="1206" id="container"></canvas>
<audio autoplay loop src="http://file.ws.126.net/f2e/ent/ent_painting2016/files/sjsznh.mp3" id="audio"></audio>

<div class="cover active">
  <div class="yu"></div>
  <div class="title_bg"></div>
  <div class="title"></div>
  <div class="year2016"></div>
</div>
<div class="start"></div>
<div class="toast"></div>
<ul id="action" class="operating">
  <li id="reverse">时光倒流</li>
  <li id="reload">再看一遍</li>
  <li id="share">分享画报</li>
</ul>
<div class="container" style="display:none"></div>
</body>
</html>

<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>

  class VPip {
      constructor(
        {
          el,
          imgEl,
          imgList = [],
          radio = 1,
          index = 0,
          scale = 0.985,
          scaleSlow = 0.995,
          w = window.innerWidth,
          h = window.innerHeight,
          otherResource,
        },
      ) {
        //init data
        this.imgList = imgList;
        this.otherResource = otherResource
        this.radio = radio;
        this.index = index;
        this.scale = scale;
        this.scaleSlow = scaleSlow;
        this.w = w > h ? 725 : w;
        this.h = w > h ? 1206 : h;
        this.mode = 'sequence'

        //timer
        this.timer = null
        //container
        this.domList = null;
        this.containerImage = null;
        this.innerImage = null;
        //el
        this.imgEl = imgEl;
        //canvas
        this.canvas = $(el)[0];
        this.ctx = this.canvas.getContext('2d');
      }

      async init() {
        try {
          await this.preloadResource()
          this.initDom()
          this._draw();
          $('.start').on('touchstart', this.handleTouchStart.bind(this));
          $('.start').on('touchend', this.handleTouchEnd.bind(this))
        } catch (e) {
          console.log(e)
        }
      }

      initDom() {
        window.addEventListener('visibilitychange', () => {
          if (document.hidden) {
            $('#audio').paused()
          } else {
            $('#audio').play()
          }
        })
        $('.loading').fadeOut();
        $('.title_bg').css('background-image', 'url(http://static.ws.126.net/f2e/ent/ent_painting2016/images/title_bg.gif?1572515819128)')
        $('.title').css('background-image', 'url(http://static.ws.126.net/f2e/ent/ent_painting2016/images/title.gif?1572515819127)')
        this.domList = $(this.imgEl).children().sort((a, b) => a.name - b.name)
        $('.operating').on('click', (event) => {
          event = event || window.event;
          const target = event.target || event.srcElement;
          console.log(target.id)
          switch (target.id) {
            case 'reverse':
              this.handleReverse()
              break;
            case 'reload':
              window.location.reload();
            default:
              this.showToast('请点击右上角...分享')

          }
        })
      }

      preloadResource() {
        const promiseList = [...this.imgList, ...this.otherResource].map((item, index) => {
          return new Promise((resolve, reject) => {
            const image = new Image()
            image.src = item.link
            image.i = index;
            image.name = String(index);
            image.className = 'item';
            image.onload = () => {
              const { imgEl } = this
              $(imgEl)[0].append(image);
              resolve();
            }
            image.onerror = () => reject('资源加载失败' + item.link);
          })
        })
        return Promise.all(promiseList);
      }

      drawScenes() {
        const imgOver = this.imgList[this.index + 1];
        const imgMini = this.imgList[this.index];
        this.containerImage = this.domList[this.index + 1];
        this.innerImage = this.domList[this.index];
        if (!imgOver && this.mode === 'sequence') {
          console.log(imgOver, this.mode)
          this.handleEndEvent('正放结束');
          $('.start').hide()
          $('.operating').fadeIn()
          this.mode = 'reverse'
          this.index = this.imgList.length - 2
          cancelAnimationFrame(this.timer);
          return
        }
        if (!imgMini && this.mode === 'reverse') {
          console.log(imgMini, this.mode)
          this.handleEndEvent('倒放结束' + this.index);
          $('.cover').fadeIn()
          this.mode = 'sequence'
          this.index = 0
          this.radio = 1
          cancelAnimationFrame(this.timer);
          return
        }

        this._drawImgOverSize(
          this.containerImage,
          imgOver.imgW,
          imgOver.imgH,
          imgOver.areaW,
          imgOver.areaH,
          imgOver.areaL,
          imgOver.areaT,
          this.radio,
        )
        this._drawImgMinSize(
          this.innerImage,
          imgMini.imgW,
          imgMini.imgH,
          imgOver.imgW,
          imgOver.imgH,
          imgOver.areaW,
          imgOver.areaH,
          imgOver.areaL,
          imgOver.areaT,
          this.radio,
        )

        let { radio, scaleSlow, scale } = this

        let { limitMax, limitMin, areaW, imgW } = imgOver
        if (this.mode === 'sequence') {
          this.radio = limitMax && limitMax > radio && limitMin < radio ? radio * scaleSlow : radio * scale;
          if (this.radio <= areaW / imgW) {
            this.index++;
            this.radio = 1;
          }
        } else {
          this.radio = limitMax && limitMax > radio && limitMin < radio ? radio / scaleSlow : radio / scale;
          if (this.radio >= 1) {
            let { areaW, imgW } = imgMini
            this.radio = areaW / imgW;
            this.index -= 1
          }
        }
      }

      _draw() {
        this.drawScenes()
      }

      _drawImgOverSize(i, iw, ih, aw, ah, al, at, r) {
        this.ctx.drawImage(
          i,
          al - (aw / r - aw) * (al / (iw - aw)),
          at - (ah / r - ah) * (at / (ih - ah)),
          aw / r,
          ah / r,
          0,
          0,
          this.w,
          this.h,
        );
      }

      _drawImgMinSize(i, ciw, cih, iw, ih, aw, ah, al, at, r) {
        this.ctx.drawImage(
          i,
          0,
          0,
          ciw,
          cih,
          this.w * (1 - r) * (al / (iw - aw)),
          // ((ah / r - ah) * (at / (ih - ah)) * r * 1206) / ah,
          this.h * (1 - r) * (at / (ih - ah)),
          this.w * r,
          this.h * r,
        );
      }

      handleTouchStart(e) {
        e.preventDefault();
        $('.cover').hide();
        $('.operating').hide()
        const render = () => {
          this.timer = requestAnimationFrame(render);
          this._draw();
        };
        cancelAnimationFrame(this.timer);
        this.timer = requestAnimationFrame(render);
      }

      handleTouchEnd(e) {
        e.preventDefault();
        cancelAnimationFrame(this.timer);
      }

      handleEndEvent(text) {
        this.showToast(text)
      }

      handleReverse() {
        $('.start').fadeIn()
        $('.operating').fadeOut()
      }

      showToast(text) {
        $('.toast').text(text)
        $('.toast').fadeIn('fast', function () {
          setTimeout(() => {
            $(this).fadeOut('slow')
          }, 1000)
        })
      }
    };



    const vpip = new VPip({
        imgList: [{
          link: 'http://static.ws.126.net/f2e/ent/ent_painting2016/images/1.jpg?1520',
          imgW: '750',
          imgH: '1206',
        }, {
          link: 'http://static.ws.126.net/f2e/ent/ent_painting2016/images/2.jpg?1520',
          imgW: '1875',
          imgH: '3015',
          areaW: '375',
          areaH: '603',
          areaL: '1379',
          areaT: '103',
          limitMax: .3,
          limitMin: .2,
        }, {
          link: 'http://static.ws.126.net/f2e/ent/ent_painting2016/images/3.jpg?1520',
          limitMax: .12,
          limitMin: .08,
          imgW: '1875',
          imgH: '3015',
          areaW: '152',
          areaH: '244',
          areaL: '791',
          areaT: '1193',
        }, {
          link: 'http://static.ws.126.net/f2e/ent/ent_painting2016/images/4.jpg?44',
          limitMax: .22,
          limitMin: .15,
          imgW: '1875',
          imgH: '3015',
          areaW: '282',
          areaH: '454',
          areaL: '857',
          areaT: '413',
        }, {
          link: 'http://static.ws.126.net/f2e/ent/ent_painting2016/images/5.jpg?44',
          limitMax: .18,
          limitMin: .123,
          imgW: '1875',
          imgH: '3015',
          areaW: '232',
          areaH: '372',
          areaL: '388',
          areaT: '844',
        }, {
          link: 'http://static.ws.126.net/f2e/ent/ent_painting2016/images/6.jpg?1200',
          imgW: '1875',
          imgH: '3015',
          areaW: '187',
          areaH: '300',
          areaL: '359',
          areaT: '1226',
        }, {
          link: 'http://static.ws.126.net/f2e/ent/ent_painting2016/images/6_5.jpg?1520',
          limitMax: .6,
          limitMin: .415,
          imgW: '1875',
          imgH: '3015',
          areaW: '778',
          areaH: '1251',
          areaL: '133',
          areaT: '856',
        }, {
          link: 'http://static.ws.126.net/f2e/ent/ent_painting2016/images/7.jpg?1520',
          imgW: '1875',
          imgH: '3015',
          areaW: '278',
          areaH: '446',
          areaL: '794',
          areaT: '783',
        }, {
          link: 'http://static.ws.126.net/f2e/ent/ent_painting2016/images/7_5.jpg?1520',
          limitMax: .75,
          limitMin: .5,
          imgW: '1875',
          imgH: '3015',
          areaW: '938',
          areaH: '1507',
          areaL: '428',
          areaT: '454',
        }, {
          link: 'http://static.ws.126.net/f2e/ent/ent_painting2016/images/8.jpg?1520',
          imgW: '1875',
          imgH: '3015',
          areaW: '290',
          areaH: '466',
          areaL: '1276',
          areaT: '665',
        }, {
          link: 'http://static.ws.126.net/f2e/ent/ent_painting2016/images/8_5.jpg?1520',
          limitMax: .6,
          limitMin: .415,
          imgW: '1875',
          imgH: '3015',
          areaW: '782',
          areaH: '1258',
          areaL: '977',
          areaT: '557',
        }, {
          link: 'http://static.ws.126.net/f2e/ent/ent_painting2016/images/9.jpg?1520',
          imgW: '1875',
          imgH: '3015',
          areaW: '238',
          areaH: '382',
          areaL: '1206',
          areaT: '2310',
        }, {
          link: 'http://static.ws.126.net/f2e/ent/ent_painting2016/images/9_5.jpg?1520',
          limitMax: .47,
          limitMin: .355,
          imgW: '1875',
          imgH: '3015',
          areaW: '669',
          areaH: '1076',
          areaL: '894',
          areaT: '1608',
        }, {
          link: 'http://static.ws.126.net/f2e/ent/ent_painting2016/images/10.jpg?1520',
          imgW: '1875',
          imgH: '3015',
          areaW: '247',
          areaH: '396',
          areaL: '285',
          areaT: '45',
        }, {
          link: 'http://static.ws.126.net/f2e/ent/ent_painting2016/images/10_5.jpg?1520',
          limitMax: .75,
          limitMin: .5,
          imgW: '1875',
          imgH: '3015',
          areaW: '938',
          areaH: '1507',
          areaL: '264',
          areaT: '21',
        }, {
          link: 'http://static.ws.126.net/f2e/ent/ent_painting2016/images/11.jpg?1520',
          imgW: '1875',
          imgH: '3015',
          areaW: '434',
          areaH: '698',
          areaL: '1059',
          areaT: '192',
        }, {
          link: 'http://static.ws.126.net/f2e/ent/ent_painting2016/images/11_5.jpg?1520',
          limitMax: .6,
          limitMin: .415,
          imgW: '1875',
          imgH: '3015',
          areaW: '780',
          areaH: '1256',
          areaL: '1038',
          areaT: '679',
        }, {
          link: 'http://static.ws.126.net/f2e/ent/ent_painting2016/images/12.jpg?1520',
          imgW: '1875',
          imgH: '3015',
          areaW: '415',
          areaH: '668',
          areaL: '226',
          areaT: '2210',
        }, {
          link: 'http://static.ws.126.net/f2e/ent/ent_painting2016/images/12_5.jpg?1520',
          limitMax: .6,
          limitMin: .415,
          imgW: '1875',
          imgH: '3015',
          areaW: '782',
          areaH: '1258',
          areaL: '356',
          areaT: '1652',
        }, {
          link: 'http://static.ws.126.net/f2e/ent/ent_painting2016/images/13.jpg?1520',
          imgW: '1875',
          imgH: '3015',
          areaW: '288',
          areaH: '462',
          areaL: '1494',
          areaT: '528',
        }, {
          link: 'http://static.ws.126.net/f2e/ent/ent_painting2016/images/13_5.jpg?1520',
          limitMax: .6,
          limitMin: .415,
          imgW: '1875',
          imgH: '3015',
          areaW: '782',
          areaH: '1257',
          areaL: '1017',
          areaT: '482',
        }, {
          link: 'http://static.ws.126.net/f2e/ent/ent_painting2016/images/14.jpg?1520',
          imgW: '1875',
          imgH: '3015',
          areaW: '99',
          areaH: '160',
          areaL: '1158',
          areaT: '2312',
        }, {
          link: 'http://static.ws.126.net/f2e/ent/ent_painting2016/images/15.jpg?1520',
          limitMax: .1,
          limitMin: .053,
          imgW: '1875',
          imgH: '3015',
          areaW: '469',
          areaH: '753',
          areaL: '1001',
          areaT: '2034 ',
        }],
        otherResource: [
          {
            link: 'http://static.ws.126.net/f2e/ent/ent_painting2016/images/cover_bg.jpg',
          },
          {
            link: 'http://static.ws.126.net/f2e/ent/ent_painting2016/images/cover.png',
          },
          {
            link: 'http://static.ws.126.net/f2e/ent/ent_painting2016/images/title_bg.gif?1572515819128',
          },
          {
            link: 'http://static.ws.126.net/f2e/ent/ent_painting2016/images/title.gif?1572515819127',
          },
        ],
        el: '#container',
        imgEl: '.container',
      })
      vpip.init()
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。