鼠标悬浮移动过过渡效果
代码语言:html
所属分类:幻灯片
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SLIDER</title> <style> html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; } </style> </head> <body> <div id="container"></div> <script src='http://repo.bfw.wiki/bfwrepo/js/three.js'></script> <script> /*------------------------------ Map ------------------------------*/ const map = (value, x1, y1, x2, y2) => (value - x1) * (y2 - x2) / (y1 - x1) + x2; /*------------------------------ Mouse ------------------------------*/ const mouse = { x: 0, y: 0 }; const mouseMove = e => { mouse.x = e.clientX || e.touches[0].clientX; mouse.y = e.clientY || e.touches[0].clientY; }; window.addEventListener('mousemove', mouseMove); window.addEventListener('touchstart', mouseMove); window.addEventListener('touchmove', mouseMove); /*------------------------------ GLSL TEMPLATE ------------------------------*/ class GLSLTemplate { constructor(opt) { Object.assign(this, opt); this.loadImages(); } /*------------------------------ Load Image ------------------------------*/ loadImages() { this.textures = []; let loadedImages = 0; // loop images for (let i = 0; i < this.images.length; i++) { const textureLoader = new THREE.TextureLoader(); textureLoader.crossOrigin = ''; textureLoader.load(this.images[i], img => { img.magFilter = THREE.NearestFilter; this.textures.push({ texture: img }); this.checkLoadedImages(); }); } } /*------------------------------ Check Load Images ------------------------------*/ checkLoadedImages() { if (this.textures.length === this.images.length) { this.setTexturesRatio(); this.setup(); } } /*------------------------------ Set Textures Ratio ------------------------------*/ setTexturesRatio() { this.winRatio = window.in.........完整代码请登录后点击上方下载按钮下载查看
网友评论0