画中画

<!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()
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,457评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,837评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,696评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,183评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,057评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,105评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,520评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,211评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,482评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,213评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,576评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2赞 335