本文共 26566 字，大约阅读时间需要 88 分钟。

项目老板专门找人做了UI登录界面,做出来之后导师拿给我们看.

怎么才能显得高大上一点呢?最起码要有个图片轮播吧.

最初的轮播效果图是:

我得到的收获:

• CSS方面

• JavaScript方面

1. .click(function(){}) 监听元素,当点击元素的时候,会触发click内部的function函数。
2. unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
3. pop() 方法用于删除并返回数组的最后一个元素。
4. push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
5. removeClass() 方法从被选元素移除一个或多个类。
6. addClass() 方法向被选元素添加一个或多个类。
7. each() 方法规定为每个匹配元素规定运行的函数。
   $(selector).each(function(index,element))
   element - 当前的元素（也可使用 “this” 选择器） index - 选择器的 index 位置
8. index() 方法返回指定元素相对于其他指定元素的 index 位置。
9. splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
10. merge() 函数用于合并两个数组内容到第一个数组。 .
11. reverse() 方法用于颠倒数组中元素的顺序。
12. eq() 方法将匹配元素集缩减值指定 index 上的一个。
    .eq(index) index 整数，指示元素的位置（最小为 0）。如果是负数，则从集合中的最后一个元素往回计数。
13. siblings() 方法返回被选元素的所有同级元素。
14. setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
15. clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。
    clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

原效果图源码(自己把jquery放到同级目录下):

   
   
	
    
		
     
			
      
			
      
			
      
			
      
			
      
			
      
			
      
		
     
	
    
		
    <	
    >	
    
		
     		
     		
     		
     		
     		
     		
     	
    
   

我的登陆界面源码:

    
       
       
           
           
   
   
    
    
        
     
            
      
                
       
                
       
                
       
            
      
        
     
        
     
            
      
用户登录
            
      
                
       
                    
                            
                        
       
                
       
                    
                            
                        
       
                
       
                    
                            
        记住密码                
       
            
      
            
      
                
                   
      
        
     
    
    
    }
   
   
    
    
   
   
    
    123
   

样式文件:

* {
       margin: 0;    padding: 0;    font-size: 13px;    font-family: 黑体, Arial, sans-serif}html, body {
       width: 100%;    height: 100%;    background: #fff}#head {
       height: 90px;}.Logo {
       width: 90px;    height: 90px;    vertical-align: middle;}.LogoName {
       width: 90%;    font-family: 华文行楷, Arial, sans-serif;    white-space: nowrap; /* 不换行*/    overflow: hidden; /*超出部分隐藏*/    font-size: 60px;    text-align:center;    color: #00BFFF;    display: inline;    position: absolute;    top: 18px;}#container {
       width: 100%;    height: 80%;    z-index: 999}#output {
       width: 100%;    height: 100%}.box_box{
       width: 500px;    height: 800px;    text-align: center;    position: absolute;    margin: -150px 0 0 -200px;    border-radius: 3px}.p3p3{
       transform:translate3d(-100px,30px,0) scale(0.8,1.2);    z-index: 1;    opacity: 1;}.p4p4{
       transform:translate3d(0,0,0) scale(1,1.4);    z-index: 2;    opacity: 1;}.p5p5{
       transform:translate3d(200px,30px,0) scale(0.8,1.2);    z-index: 1;    opacity: 1;}li{
       background: #00BFFF;    position: fixed;    top: 35%;    left: 15%;    list-style: none;    transition: all 0.3s ease-out;}.containerT {
       width: 500px;    height: 400px;    text-align: center;    position: absolute;    top: 55%;    left: 75%;    margin: -150px 0 0 -200px;    border-radius: 3px}    .containerT h1 {
           font-size: 35px;        font-family: 华文行楷, Arial, sans-serif;        font-weight: 500    }form {
       /*        所有form元素    */    padding: 20px 0;    position: relative;    z-index: 2}    form input[class^="user"] {
           /*            form元素中所有input        */        -webkit-appearance: none;        -moz-appearance: none;        appearance: none;        outline: 0;        border: 1px solid rgba(255, 255, 255, .4);        background-color: rgba(255, 255, 255, .2);        width: 200px;        border-radius: 10px;        padding: 8px 15px;        margin: 0 auto 10px;        display: inline-block;        text-align: center;        font-size: 15px;        -webkit-transition-duration: .25s;        transition-duration: .25s;    }        form input[type^="text"]:hover {
               background-color: rgba(255, 255, 255, .4)        }        form input[type^="text"]:focus {
               background-color: #fff;            width: 230px;            color: #333        }.tipSpan {
       font-size: 20px;    font-family: 华文行楷, Arial, sans-serif;}.button {
       font-family: 华文行楷, Arial, sans-serif;    background-color: #21a4ee;    border: none;    padding: 15px 32px;    font-size: 16px;    margin: 4px 2px;    cursor: pointer;    border-radius: 50%;}    .button:hover {
           box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);    }#foot {
       background-color: #2e9bff;    border: 0;    height: 80px;    width: 100%;    position: fixed;}.titleSpan {
       position: absolute;    top: 20px;    font-size: 20px;    right: 40%;    left: 40%;    text-align: center;    display: block;}

动图背景js文件:

CAV = {
    FRONT: 0, BACK: 1, DOUBLE: 2, SVGNS: "http://www.w3.org/2000/svg" };CAV.Array = typeof Float32Array === "function" ? Float32Array : Array;CAV.Utils = {
       isNumber: function (a) {
           return !isNaN(parseFloat(a)) && isFinite(a)    }};(function () {
       for (var a = 0, b = ["ms", "moz", "webkit", "o"], c = 0; c < b.length && !window.requestAnimationFrame; ++c) window.requestAnimationFrame = window[b[c] + "RequestAnimationFrame"], window.cancelAnimationFrame = window[b[c] + "CancelAnimationFrame"] || window[b[c] + "CancelRequestAnimationFrame"];    if (!window.requestAnimationFrame) window.requestAnimationFrame = function (b) {
           var c = (new Date).getTime(), f = Math.max(0, 16 - (c - a)), g = window.setTimeout(function () {
               b(c + f)        }, f);        a = c + f;        return g    };    if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function (a) {
           clearTimeout(a)    }})();Math.PIM2 = Math.PI * 2;Math.PID2 = Math.PI / 2;Math.randomInRange = function (a, b) {
       return a + (b - a) * Math.random()};Math.clamp = function (a, b, c) {
       a = Math.max(a, b);    return a = Math.min(a, c)};CAV.Vector3 = {
       create: function (a, b, c) {
           var d = new CAV.Array(3);        this.set(d, a, b, c);        return d    }, clone: function (a) {
           var b = this.create();        this.copy(b, a);        return b    }, set: function (a, b, c, d) {
           a[0] = b || 0;        a[1] = c || 0;        a[2] = d || 0;        return this    }, setX: function (a, b) {
           a[0] = b || 0;        return this    }, setY: function (a, b) {
           a[1] = b || 0;        return this    }, setZ: function (a, b) {
           a[2] = b || 0;        return this    }, copy: function (a, b) {
           a[0] = b[0];        a[1] = b[1];        a[2] = b[2];        return this    }, add: function (a, b) {
           a[0] += b[0];        a[1] += b[1];        a[2] += b[2];        return this    }, addVectors: function (a, b, c) {
           a[0] = b[0] +            c[0];        a[1] = b[1] + c[1];        a[2] = b[2] + c[2];        return this    }, addScalar: function (a, b) {
           a[0] += b;        a[1] += b;        a[2] += b;        return this    }, subtract: function (a, b) {
           a[0] -= b[0];        a[1] -= b[1];        a[2] -= b[2];        return this    }, subtractVectors: function (a, b, c) {
           a[0] = b[0] - c[0];        a[1] = b[1] - c[1];        a[2] = b[2] - c[2];        return this    }, subtractScalar: function (a, b) {
           a[0] -= b;        a[1] -= b;        a[2] -= b;        return this    }, multiply: function (a, b) {
           a[0] *= b[0];        a[1] *= b[1];        a[2] *= b[2];        return this    }, multiplyVectors: function (a, b, c) {
           a[0] = b[0] * c[0];        a[1] = b[1] * c[1];        a[2] = b[2] * c[2];        return this    }, multiplyScalar: function (a, b) {
           a[0] *= b;        a[1] *= b;        a[2] *= b;        return this    }, divide: function (a, b) {
           a[0] /= b[0];        a[1] /= b[1];        a[2] /= b[2];        return this    }, divideVectors: function (a, b, c) {
           a[0] = b[0] / c[0];        a[1] = b[1] / c[1];        a[2] = b[2] / c[2];        return this    }, divideScalar: function (a, b) {
           b !== 0 ? (a[0] /= b, a[1] /= b, a[2] /= b) : (a[0] = 0, a[1] = 0, a[2] = 0);        return this    }, cross: function (a, b) {
           var c = a[0], d = a[1], e = a[2];        a[0] = d * b[2] - e * b[1];        a[1] = e * b[0] - c * b[2];        a[2] = c * b[1] - d * b[0];        return this    }, crossVectors: function (a, b, c) {
           a[0] = b[1] * c[2] - b[2] * c[1];        a[1] = b[2] * c[0] - b[0] * c[2];        a[2] = b[0] * c[1] - b[1] * c[0];        return this    }, min: function (a, b) {
           a[0] < b && (a[0] = b);        a[1] < b && (a[1] = b);        a[2] < b && (a[2] = b);        return this    }, max: function (a, b) {
           a[0] > b && (a[0] = b);        a[1] > b && (a[1] = b);        a[2] > b && (a[2] = b);        return this    }, clamp: function (a, b, c) {
           this.min(a, b);        this.max(a, c);        return this    }, limit: function (a, b, c) {
           var d = this.length(a);        b !== null && d < b ? this.setLength(a, b) : c !== null && d > c && this.setLength(a, c);        return this    }, dot: function (a, b) {
           return a[0] * b[0] + a[1] * b[1] + a[2] * b[2]    }, normalise: function (a) {
           return this.divideScalar(a, this.length(a))    }, negate: function (a) {
           return this.multiplyScalar(a, -1)    }, distanceSquared: function (a, b) {
           var c = a[0] - b[0], d = a[1] - b[1], e = a[2] - b[2];        return c * c + d * d + e * e    }, distance: function (a, b) {
           return Math.sqrt(this.distanceSquared(a, b))    }, lengthSquared: function (a) {
           return a[0] * a[0] + a[1] * a[1] + a[2] * a[2]    }, length: function (a) {
           return Math.sqrt(this.lengthSquared(a))    }, setLength: function (a, b) {
           var c = this.length(a);        c !== 0 && b !== c && this.multiplyScalar(a, b / c);        return this    }};CAV.Vector4 = {
       create: function (a, b, c) {
           var d = new CAV.Array(4);        this.set(d, a, b, c);        return d    }, set: function (a, b, c, d, e) {
           a[0] = b || 0;        a[1] = c || 0;        a[2] = d || 0;        a[3] = e || 0;        return this    }, setX: function (a, b) {
           a[0] = b || 0;        return this    }, setY: function (a, b) {
           a[1] = b || 0;        return this    }, setZ: function (a, b) {
           a[2] = b || 0;        return this    }, setW: function (a, b) {
           a[3] = b || 0;        return this    }, add: function (a, b) {
           a[0] += b[0];        a[1] += b[1];        a[2] += b[2];        a[3] += b[3];        return this    }, multiplyVectors: function (a, b, c) {
           a[0] = b[0] * c[0];        a[1] = b[1] * c[1];        a[2] = b[2] * c[2];        a[3] = b[3] * c[3];        return this    }, multiplyScalar: function (a, b) {
           a[0] *= b;        a[1] *= b;        a[2] *= b;        a[3] *= b;        return this    }, min: function (a, b) {
           a[0] < b && (a[0] = b);        a[1] < b && (a[1] = b);        a[2] < b && (a[2] = b);        a[3] < b && (a[3] = b);        return this    }, max: function (a, b) {
           a[0] > b && (a[0] = b);        a[1] > b && (a[1] = b);        a[2] > b && (a[2] = b);        a[3] > b && (a[3] = b);        return this    }, clamp: function (a, b, c) {
           this.min(a, b);        this.max(a, c);        return this    }};CAV.Color = function (a, b) {
       this.rgba = CAV.Vector4.create();    this.hex = a || "#000000";    this.opacity = CAV.Utils.isNumber(b) ? b : 1;    this.set(this.hex, this.opacity)};CAV.Color.prototype = {
       set: function (a, b) {
           var a = a.replace("#", ""), c = a.length / 3;        this.rgba[0] = parseInt(a.substring(c * 0, c * 1), 16) / 255;        this.rgba[1] = parseInt(a.substring(c * 1, c * 2), 16) / 255;        this.rgba[2] = parseInt(a.substring(c * 2, c * 3), 16) / 255;        this.rgba[3] = CAV.Utils.isNumber(b) ? b : this.rgba[3];        return this    }, hexify: function (a) {
           a = Math.ceil(a * 255).toString(16);        a.length === 1 && (a = "0" + a);        return a    }, format: function () {
           var a = this.hexify(this.rgba[0]), b = this.hexify(this.rgba[1]), c = this.hexify(this.rgba[2]);        return this.hex = "#" +            a + b + c    }};CAV.Object = function () {
       this.position = CAV.Vector3.create()};CAV.Object.prototype = {
       setPosition: function (a, b, c) {
           CAV.Vector3.set(this.position, a, b, c);        return this    }};CAV.Light = function (a, b) {
       CAV.Object.call(this);    this.ambient = new CAV.Color(a || "#FFFFFF");    this.diffuse = new CAV.Color(b || "#FFFFFF");    this.ray = CAV.Vector3.create()};CAV.Light.prototype = Object.create(CAV.Object.prototype);CAV.Vertex = function (a, b, c) {
       this.position = CAV.Vector3.create(a, b, c)};CAV.Vertex.prototype = {
       setPosition: function (a, b, c) {
           CAV.Vector3.set(this.position, a, b, c);        return this    }};CAV.Triangle = function (a, b, c) {
       this.a = a || new CAV.Vertex;    this.b = b || new CAV.Vertex;    this.c = c || new CAV.Vertex;    this.vertices = [this.a, this.b, this.c];    this.u = CAV.Vector3.create();    this.v = CAV.Vector3.create();    this.centroid = CAV.Vector3.create();    this.normal = CAV.Vector3.create();    this.color = new CAV.Color;    this.polygon = document.createElementNS(CAV.SVGNS, "polygon");    this.polygon.setAttributeNS(null, "stroke-linejoin", "round");    this.polygon.setAttributeNS(null, "stroke-miterlimit", "1");    this.polygon.setAttributeNS(null, "stroke-width", "1");    this.computeCentroid();    this.computeNormal()};CAV.Triangle.prototype = {
       computeCentroid: function () {
           this.centroid[0] = this.a.position[0] + this.b.position[0] + this.c.position[0];        this.centroid[1] = this.a.position[1] + this.b.position[1] + this.c.position[1];        this.centroid[2] = this.a.position[2] + this.b.position[2] + this.c.position[2];        CAV.Vector3.divideScalar(this.centroid, 3);        return this    }, computeNormal: function () {
           CAV.Vector3.subtractVectors(this.u, this.b.position, this.a.position);        CAV.Vector3.subtractVectors(this.v, this.c.position, this.a.position);        CAV.Vector3.crossVectors(this.normal, this.u, this.v);        CAV.Vector3.normalise(this.normal);        return this    }};CAV.Geometry = function () {
       this.vertices = [];    this.triangles = [];    this.dirty = false};CAV.Geometry.prototype = {
       update: function () {
           if (this.dirty) {
               var a, b;            for (a = this.triangles.length - 1; a >= 0; a--) b = this.triangles[a], b.computeCentroid(), b.computeNormal();            this.dirty = false        }        return this    }};CAV.Plane = function (a, b, c, d) {
       CAV.Geometry.call(this);    this.width = a || 100;    this.height = b || 100;    this.segments = c || 4;    this.slices = d || 4;    this.segmentWidth = this.width / this.segments;    this.sliceHeight = this.height / this.slices;    var e, f, g, c = [];    e = this.width * -0.5;    f = this.height * 0.5;    for (a = 0; a <= this.segments; a++) {
           c.push([]);        for (b = 0; b <= this.slices; b++) d = new CAV.Vertex(e + a * this.segmentWidth, f - b * this.sliceHeight), c[a].push(d), this.vertices.push(d)    }    for (a = 0; a < this.segments; a++) for (b = 0; b < this.slices; b++) d = c[a + 0][b + 0], e = c[a + 0][b +        1], f = c[a + 1][b + 0], g = c[a + 1][b + 1], t0 = new CAV.Triangle(d, e, f), t1 = new CAV.Triangle(f, e, g), this.triangles.push(t0, t1)};CAV.Plane.prototype = Object.create(CAV.Geometry.prototype);CAV.Material = function (a, b) {
       this.ambient = new CAV.Color(a || "#444444");    this.diffuse = new CAV.Color(b || "#FFFFFF");    this.slave = new CAV.Color};CAV.Mesh = function (a, b) {
       CAV.Object.call(this);    this.geometry = a || new CAV.Geometry;    this.material = b || new CAV.Material;    this.side = CAV.FRONT;    this.visible = true};CAV.Mesh.prototype = Object.create(CAV.Object.prototype);CAV.Mesh.prototype.update = function (a, b) {
       var c, d, e, f, g;    this.geometry.update();    if (b) for (c = this.geometry.triangles.length - 1; c >= 0; c--) {
           d = this.geometry.triangles[c];        CAV.Vector4.set(d.color.rgba);        for (e = a.length - 1; e >= 0; e--) f = a[e], CAV.Vector3.subtractVectors(f.ray, f.position, d.centroid), CAV.Vector3.normalise(f.ray), g = CAV.Vector3.dot(d.normal, f.ray), this.side === CAV.FRONT ? g = Math.max(g, 0) : this.side === CAV.BACK ? g = Math.abs(Math.min(g, 0)) : this.side === CAV.DOUBLE && (g = Math.max(Math.abs(g), 0)), CAV.Vector4.multiplyVectors(this.material.slave.rgba, this.material.ambient.rgba, f.ambient.rgba), CAV.Vector4.add(d.color.rgba, this.material.slave.rgba), CAV.Vector4.multiplyVectors(this.material.slave.rgba, this.material.diffuse.rgba, f.diffuse.rgba), CAV.Vector4.multiplyScalar(this.material.slave.rgba, g), CAV.Vector4.add(d.color.rgba, this.material.slave.rgba);        CAV.Vector4.clamp(d.color.rgba, 0, 1)    }    return this};CAV.Scene = function () {
       this.meshes = [];    this.lights = []};CAV.Scene.prototype = {
       add: function (a) {
           a instanceof CAV.Mesh && !~this.meshes.indexOf(a) ? this.meshes.push(a) : a instanceof CAV.Light && !~this.lights.indexOf(a) && this.lights.push(a);        return this    }, remove: function (a) {
           a instanceof CAV.Mesh && ~this.meshes.indexOf(a) ? this.meshes.splice(this.meshes.indexOf(a), 1) : a instanceof CAV.Light && ~this.lights.indexOf(a) && this.lights.splice(this.lights.indexOf(a), 1);        return this    }};CAV.Renderer = function () {
       this.halfHeight = this.halfWidth = this.height = this.width = 0};CAV.Renderer.prototype = {
       setSize: function (a, b) {
           if (!(this.width === a && this.height === b)) return this.width = a, this.height = b, this.halfWidth = this.width * 0.5, this.halfHeight = this.height * 0.5, this    }, clear: function () {
           return this    }, render: function () {
           return this    }};CAV.CanvasRenderer = function () {
       CAV.Renderer.call(this);    this.element = document.createElement("canvas");    this.element.style.display = "block";    this.context = this.element.getContext("2d");    this.setSize(this.element.width, this.element.height)};CAV.CanvasRenderer.prototype = Object.create(CAV.Renderer.prototype);CAV.CanvasRenderer.prototype.setSize = function (a, b) {
       CAV.Renderer.prototype.setSize.call(this, a, b);    this.element.width = a;    this.element.height = b;    this.context.setTransform(1, 0, 0, -1, this.halfWidth, this.halfHeight);    return this};CAV.CanvasRenderer.prototype.clear = function () {
       CAV.Renderer.prototype.clear.call(this);    this.context.clearRect(-this.halfWidth, -this.halfHeight, this.width, this.height);    return this};CAV.CanvasRenderer.prototype.render = function (a) {
       CAV.Renderer.prototype.render.call(this, a);    var b, c, d, e, f;    this.clear();    this.context.lineJoin = "round";    this.context.lineWidth = 1;    for (b = a.meshes.length - 1; b >= 0; b--) if (c = a.meshes[b], c.visible) {
           c.update(a.lights, true);        for (d = c.geometry.triangles.length - 1; d >= 0; d--) e = c.geometry.triangles[d], f = e.color.format(), this.context.beginPath(), this.context.moveTo(e.a.position[0], e.a.position[1]), this.context.lineTo(e.b.position[0], e.b.position[1]), this.context.lineTo(e.c.position[0], e.c.position[1]), this.context.closePath(), this.context.strokeStyle = f, this.context.fillStyle = f, this.context.stroke(), this.context.fill()    }    return this};function Victor(container, anitOut) {
       if (!!document.createElement("canvas").getContext) {
           var t = {
               width: 1.5,            height: 1.5,            depth: 10,            segments: 12,            slices: 6,            xRange: 0.8,            yRange: 0.1,            zRange: 1,            ambient: "#525252",            diffuse: "#A5A5A5",            speed: 0.0002        };        var G = {
               count: 2,            xyScalar: 1,            zOffset: 100,            ambient: "#1c8bff",            diffuse: "#1c8bff",            speed: 0.001,            gravity: 1200,            dampening: 0.95,            minLimit: 10,            maxLimit: null,            minDistance: 20,            maxDistance: 400,            autopilot: false,            draw: false,            bounds: CAV.Vector3.create(),            step: CAV.Vector3.create(Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1))        };        var m = "canvas";        var E = "svg";        var x = {
    renderer: m };        var i, n = Date.now();        var L = CAV.Vector3.create();        var k = CAV.Vector3.create();        var z = document.getElementById(container || "container");        var w = document.getElementById(anitOut || "anitOut");        var D, I, h, q, y;        var g;        var r;        function C() {
               F();            p();            s();            B();            v();            K(z.offsetWidth, z.offsetHeight);            o()        }        function F() {
               g = new CAV.CanvasRenderer();            H(x.renderer)        }        function H(N) {
               if (D) {
                   w.removeChild(D.element)            }            switch (N) {
                   case m:                    D = g;                    break            }            D.setSize(z.offsetWidth, z.offsetHeight);            w.appendChild(D.element)        }        function p() {
               I = new CAV.Scene()        }        function s() {
               I.remove(h);            D.clear();            q = new CAV.Plane(t.width * D.width, t.height * D.height, t.segments, t.slices);            y = new CAV.Material(t.ambient, t.diffuse);            h = new CAV.Mesh(q, y);            I.add(h);            var N, O;            for (N = q.vertices.length - 1; N >= 0; N--) {
                   O = q.vertices[N];                O.anchor = CAV.Vector3.clone(O.position);                O.step = CAV.Vector3.create(Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1));                O.time = Math.randomInRange(0, Math.PIM2)            }        }        function B() {
               var O, N;            for (O = I.lights.length - 1; O >= 0; O--) {
                   N = I.lights[O];                I.remove(N)            }            D.clear();            for (O = 0; O < G.count; O++) {
                   N = new CAV.Light(G.ambient, G.diffuse);                N.ambientHex = N.ambient.format();                N.diffuseHex = N.diffuse.format();                I.add(N);                N.mass = Math.randomInRange(0.5, 1);                N.velocity = CAV.Vector3.create();                N.acceleration = CAV.Vector3.create();                N.force = CAV.Vector3.create()            }        }        function K(O, N) {
               D.setSize(O, N);            CAV.Vector3.set(L, D.halfWidth, D.halfHeight);            s()        }        function o() {
               i = Date.now() - n;            u();            M();            requestAnimationFrame(o)        }        function u() {
               var Q, P, O, R, T, V, U, S = t.depth / 2;            CAV.Vector3.copy(G.bounds, L);            CAV.Vector3.multiplyScalar(G.bounds, G.xyScalar);            CAV.Vector3.setZ(k, G.zOffset);            for (R = I.lights.length - 1; R >= 0; R--) {
                   T = I.lights[R];                CAV.Vector3.setZ(T.position, G.zOffset);                var N = Math.clamp(CAV.Vector3.distanceSquared(T.position, k), G.minDistance, G.maxDistance);                var W = G.gravity * T.mass / N;                CAV.Vector3.subtractVectors(T.force, k, T.position);                CAV.Vector3.normalise(T.force);                CAV.Vector3.multiplyScalar(T.force, W);                CAV.Vector3.set(T.acceleration);                CAV.Vector3.add(T.acceleration, T.force);                CAV.Vector3.add(T.velocity, T.acceleration);                CAV.Vector3.multiplyScalar(T.velocity, G.dampening);                CAV.Vector3.limit(T.velocity, G.minLimit, G.maxLimit);                CAV.Vector3.add(T.position, T.velocity)            }            for (V = q.vertices.length - 1; V >= 0; V--) {
                   U = q.vertices[V];                Q = Math.sin(U.time + U.step[0] * i * t.speed);                P = Math.cos(U.time + U.step[1] * i * t.speed);                O = Math.sin(U.time + U.step[2] * i * t.speed);                CAV.Vector3.set(U.position, t.xRange * q.segmentWidth * Q, t.yRange * q.sliceHeight * P, t.zRange * S * O - S);                CAV.Vector3.add(U.position, U.anchor)            }            q.dirty = true        }        function M() {
               D.render(I)        }        function J(O) {
               var Q, N, S = O;            var P = function (T) {
                   for (Q = 0, l = I.lights.length; Q < l; Q++) {
                       N = I.lights[Q];                    N.ambient.set(T);                    N.ambientHex = N.ambient.format()                }            };            var R = function (T) {
                   for (Q = 0, l = I.lights.length; Q < l; Q++) {
                       N = I.lights[Q];                    N.diffuse.set(T);                    N.diffuseHex = N.diffuse.format()                }            };            return {
                   set: function () {
                       P(S[0]);                    R(S[1])                }            }        }        function v() {
               window.addEventListener("resize", j)        }        function A(N) {
               CAV.Vector3.set(k, N.x, D.height - N.y);            CAV.Vector3.subtract(k, L)        }        function j(N) {
               K(z.offsetWidth, z.offsetHeight);            M()        }        C();    }    return J;}

转载地址：https://kaisarh.blog.csdn.net/article/details/103175326 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！