js实现炫酷闪烁相册图片放大效果代码-html代码-BFW代码库

代码语言：html
代码描述：js实现炫酷闪烁相册图片放大效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
  
  
<style>
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}
html {
  background: #01012a;
  color: #33def4;
}
html,
body {
  -ms-scroll-chaining: none;
      overscroll-behavior: none;
  font-family: Montserrat, sans-serif;
  overflow: hidden;
}
.box {
  padding: 32px;
}
h1 {
  font-size: 2.4rem;
  padding-bottom: 16px;
}
.loading {
  z-index: 9999;
  background: #01012a;
  color: #33def4;
  text-align: center;
  position: fixed;
  width: 100%;
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s 0.8s cubic-bezier(0.755, 0.05, 0.855, 0.06), visibility 0.8s 0.8s cubic-bezier(0.755, 0.05, 0.855, 0.06);
}
.loading.loaded {
  opacity: 0;
  visibility: hidden;
}
.loading .loading-container {
  position: relative;
  width: 40%;
  overflow: hidden;
}
.loading .loading-container .counter {
  padding: 0.8rem;
  transform: traslate(0, 0);
}
.loading .loading-container .counter.loaded {
  -webkit-animation: counter-animation 0.8s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.8s 1 normal forwards running;
          animation: counter-animation 0.8s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.8s 1 normal forwards running;
}
.loading .loading-container .line {
  position: absolute;
  background: #03e2e7;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
}
.loading .loading-container .line.loaded {
  -webkit-animation: line-animation 0.8s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0s 1 normal forwards running;
          animation: line-animation 0.8s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0s 1 normal forwards running;
}
@-webkit-keyframes counter-animation {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 10%);
  }
}
@keyframes counter-animation {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 10%);
  }
}
@-webkit-keyframes line-animation {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}
@keyframes line-animation {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}
</style>


</head>

<body >
  <div class="loading">
  <div class="loading-container">
    <p class="counter"></p>
    <div class="line"></div>
  </div>
</div>
<div class="body-container">
  <div class="box">
    <h1>Gallery Example</h1>
    <p>Pictures replace youself</p>
  </div>
</div>

  
      <script >
const imagePaths = [
'//repo.bfw.wiki/bfwrepo/image/63534d857657c.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_320,/quality,q_90',
'//repo.bfw.wiki/bfwrepo/image/6359f297c8f3a.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_320,/quality,q_90',
'//repo.bfw.wiki/bfwrepo/image/635f4245169a2.jpeg?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_320,/quality,q_90',
'//repo.bfw.wiki/bfwrepo/image/6361bf0d016cd.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_320,/quality,q_90',
'//repo.bfw.wiki/bfwrepo/image/634f7173a3b14.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_320,/quality,q_90',
'//repo.bfw.wiki/bfwrepo/image/6348d34ae66ed.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_320,/quality,q_90',
'//repo.bfw.wiki/bfwrepo/image/6348d3068f4a4.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_320,/quality,q_90',
'//repo.bfw.wiki/bfwrepo/image/634529a09dcc8.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_320,/quality,q_90',
'//repo.bfw.wiki/bfwrepo/image/6345296fa6e78.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_320,/quality,q_90',
'//repo.bfw.wiki/bfwrepo/image/634282796e5f9.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_320,/quality,q_90',
'//repo.bfw.wiki/bfwrepo/image/633e20363da3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_320,/quality,q_90',
'//repo.bfw.wiki/bfwrepo/image/633a9ab072e73.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_320,/quality,q_90',
'//repo.bfw.wiki/bfwrepo/image/633a16aaddb60.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_320,/quality,q_90'];


class Utilities {
  static norm(value, min, max) {
    return (value - min) / (max - min);
  }

  static lerp(norm, min, max) {
    return (max - min) * norm + min;
  }

  static map(value, sourceMin, sourceMax, destMin, destMax) {
    return this.lerp(this.norm(value, sourceMin, sourceMax), destMin, destMax);
  }

  static clamp(value, min, max) {
    return Math.min(Math.max(value, min), max);
  }

  static distance(x0, y0, x1, y1) {
    const dx = x1 - x0;
    const dy = y1 - y0;

    return Math.sqrt(dx * dx + dy * dy);
  }

  static randomRange(min, max) {
    return min + Math.random() * (max - min);
  }

  static randomInt(min, max) {
    return Math.floor(min + Math.random() * (max - min + 1));
  }

  static randomDist(min, max, iterations) {
    let total = 0;

    for (let i = 0; i < iterations; i++) {
      total += this.randomRange(min, max);
    }

    return total / iterations;
  }

  static degreesToRads(degrees) {
    return degrees / 180 * Math.PI;
  }

  static radsToDegrees(radians) {
    return radians * 180 / Math.PI;
  }

  static roundToPlaces(value, places) {
    const mult = Math.pow(10, places);

    return Math.round(value * mult) / mult;
  }

  static roundNearest(value, nearest) {
    return Math.round(value / nearest) * nearest;
  }}


class Loading {
  constructor() {
    this.load = document.getElementsByClassName('loading')[0];
    this.line = document.getElementsByClassName('line')[0];
    this.counter = document.getElementsByClassName('counter')[0];
    this.imagePaths = imagePaths;
    this.loadedNumber = 1;
    this.percentage = 0;
    this.num = 0;
  }

  initialize() {
    return new Promise((resolve, reject) => {
      this.loadImages(resolve, reject);
    });
  }

  loadImages(resolve, reject) {
    for (let i = 0; i < this.imagePaths.length; i++) {
      const path = this.imagePaths[i];
      const image = new Image();

      image.src = path;
      image.crossOrigin = "anonymous";

      image.addEventListener('load', () => {
        this.percentage = this.getPercentage(this.loadedNumber++);
      });
    }

    this.drawPercentage(resolve, reject);
  }

  getPercentage(num) {
    return Math.floor(num / this.imagePaths.length * 100);
  }

  drawPercentage(resolve, reject) {
    if (this.num < this.percentage) {
      this.num++;
    }

    this.line.style.width = this.num + '%';
    this.counter.textContent = this.num + '%';

    if (this.num === 100) {
      this.cancelDrawLoopCounterNumber(resolve, reject);

      return;
    }

    this.animationID = requestAnimationFrame(this.drawPercentage.bind(this, resolve, reject));
  }

  cancelDrawLoopCounterNumber(resolve, reject) {
    cancelAnimationFrame(this.animationID);

    this.addClass(resolve, reject);
  }

  addClass(resolve, reject) {
    this.delay(400).
    then(() => {
      this.load.classList.add('loaded');
      this.line.classList.add('loaded');
      this.counter.classList.add('loaded');

      resolve();
    });
  }

  delay(time) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve();
      }, time);
    });
  }}


class FullScreen {
  constructor() {
    this.setupEvents();
    this.initialize();
  }

  initialize() {
    const vh = window.innerHeight * 0.01;

    document.documentElement.style.setProperty('--vh', `${vh}px`);
  }

  setupEvents() {
    window.addEventListener('resize', this.onResize.bind(this), false);
  }

  onResize() {
    this.initialize();
  }}


class DrawMainImage {
  constructor(ctx, width, height) {
    this.ctx = ctx;
    this.width = width;
    this.height = height;

    this.initialize();
  }

  initialize() {
    this.canvas = document.createElement('canvas');
    this.ctx2 = this.canvas.getContext('2d');
    this.image = null;
    this.stopWatch = new Stopwatch();
    this.dataArr = [];
  }

  drawImage(src) {
    this.isLoaded = false;
    this.image = new Image();
    this.image.src = src;
    this.image.crossOrigin = "anonymous";

    this.image.addEventListener('load', () => {
      this.stopWatch.initialize();

      let imageWidth, ratio, imageHeight;

      if (this.image.width >= this.image.height) {
        imageWidth = Math.min(this.width * 0.9, this.image.width);
        ratio = this.image.width / this.image.height;
        imageHeight = imageWidth / ratio;
      } else {
        imageHeight = Math.min(this.height * 0.9, this.image.height);
        ratio = this.image.height / this.image.width;
        imageWidth = imageHeight / ratio;

        if (imageWidth >= this.width * 0.9) {
          imageWidth = Math.min(this.width * 0.9, this.image.width);
          ratio = this.image.width / this.image.height;
          imageHeight = imageWidth / ratio;
        }
      }

      this.canvas.width = imageWidth;
      this.canvas.height = imageHeight;

      this.ctx2.clearRect(0, 0, imageWidth, imageHeight);
      this.ctx2.drawImage(this.image, 0, 0, imageWidth, imageHeight);

      this.getImageData();
      this.isLoaded = true;
    });
  }

  getImageData() {
    this.dataArr = [];

    let preHeight = 0,addHeight = 0;
    for (let i = 0; i < this.canvas.height; i += addHeight) {
      const obj = {};

      addHeight = Utilities.randomInt(5, 20);

      if (preHeight + addHeight > this.canvas.height) {
        addHeight = Math.floor(this.canvas.height - preHeight);
      }

      if (addHeight === 0) return;

      const image = this.ctx2.getImageData(
      0,
      preHeight,
      this.canvas.width,
      addHeight);


      obj.image = image;
      obj.height = preHeight;
      obj.width = Math.random() * this.width * 0.5 - this.width * 0.25;

      this.dataArr.push(obj);

      preHeight += addHeight;
    }
  }

  addImage(t) {
    if (!this.isLoaded) return;

    for (let i = 0; i < this.dataArr.length; i++) {
      this.ctx.putImageData(
      this.dataArr[i].image,
      this.width / 2 - this.canvas.width / 2 + this.dataArr[i].width,
      this.height / 2 - this.canvas.height / 2 + this.dataArr[i].height);

    }

    this.moveImage();
  }

  moveImage() {
    this.stopWatch.calculateTime();

    const t = 1.0 - Math.min(this.stopWatch.getElapsedTime() * 0.0002, 1.0);

    this.e = this.ease(t);

    for (let i = 0; i < this.dataArr.length; i++) {
      this.dataArr[i].width *= this.e;
    }
  }

  deleteImage(t) {
    if (!this.isLoaded) return;

    for (let i = 0; i < this.dataArr.length; i++) {
      this.ctx.putImageData(
      this.dataArr[i].image,
      this.width / 2 - this.canvas.width / 2 + this.dataArr[i].width + Math.tan(.........完整代码请登录后点击上方下载按钮下载查看