鼠标悬浮移动过过渡效果-html代码-BFW代码库

鼠标悬浮移动过过渡效果

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看