js 图片打碎_html5 tweenmax.js打碎玻璃图片轮播切换特效

特效描述：html5 tweenmax.js 打碎玻璃图片 轮播切换特效。html5碎玻璃图片切换特效，tweenmax.js实列

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

const TWO_PI = Math.PI * 2;

var images = [],

imageIndex = 0;

var image,

imageWidth = 768,

imageHeight = 485;

var vertices = [],

indices = [],

prevfrag = [],

fragments = [];

var margin = 50;

var container = document.getElementById('container');

var clickPosition = [imageWidth * 0.5, imageHeight * 0.5];

window.onload = function() {

TweenMax.set(container, {perspective:500});

// images from http://www.hdwallpapers.in

var urls = [

'images/1.jpg',

'images/2.jpg',

'images/3.jpg',

'images/4.jpg'

],

image,

loaded = 0;

// very quick and dirty hack to load and display the first image asap

images[0] = image = new Image();

image.onload = function() {

if (++loaded === 1) {

for (var i = 1; i < 4; i++) {

images[i] = image = new Image();

image.src = urls[i];

}

placeImage();

}

};

image.src = urls[0];

};

function placeImage(transitionIn) {

image = images[imageIndex];

if (++imageIndex === images.length) imageIndex = 0;

var num = Math