html5背景 <br> *{margin:0;padding:0;list-style-type:none;}<br> a,img{border:0;}<br> <br>$(function () {<br> if (!window.ActiveXObject && !!document.createElement("canvas").getContext) {<br> $.getScript("http://im-img.qq.com/pcqq/js/200/cav.js?_=1428576021379",<br> function () {<br> var t = {<br> width: 1.5,<br> height: 1.5,<br> depth: 10,<br> segments: 12,<br> slices: 6,<br> xRange: 0.8,<br> yRange: 0.1,<br> zRange: 1,<br> ambient: "#525252",<br> diffuse: "#FFFFFF",<br> speed: 0.0002<br> };<br> var G = {<br> count: 2,<br> xyScalar: 1,<br> zOffset: 100,<br> ambient: "#002c4a",<br> diffuse: "#005584",<br> speed: 0.001,<br> gravity: 1200,<br> dampening: 0.95,<br> minLimit: 10,<br> maxLimit: null,<br> minDistance: 20,<br> maxDistance: 400,<br> autopilot: false,<br> draw: false,<br> bounds: CAV.Vector3.create(),<br> step: CAV.Vector3.create(Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1))<br> };<br> var m = "canvas";<br> var E = "svg";<br> var x = {<br> renderer: m<br> };<br> var i, n = Date.now();<br> var L = CAV.Vector3.create();<br> var k = CAV.Vector3.create();<br> var z = document.getElementById("container");<br> var w = document.getElementById("anitOut");<br> var D, I, h, q, y;<br> var g;<br> var r;<br><br> function C() {<br> F();<br> p();<br> s();<br> B();<br> v();<br> K(z.offsetWidth, z.offsetHeight);<br> o()<br> }<br><br> function F() {<br> g = new CAV.CanvasRenderer();<br> H(x.renderer)<br> }<br><br> function H(N) {<br> if (D) {<br> w.removeChild(D.element)<br> }<br> switch (N) {<br> case m:<br> D = g;<br> break<br> }<br> D.setSize(z.offsetWidth, z.offsetHeight);<br> w.appendChild(D.element)<br> }<br><br> function p() {<br> I = new CAV.Scene()<br> }<br><br> function s() {<br> I.remove(h);<br> D.clear();<br> q = new CAV.Plane(t.width * D.width, t.height * D.height, t.segments, t.slices);<br> y = new CAV.Material(t.ambient, t.diffuse);<br> h = new CAV.Mesh(q, y);<br> I.add(h);<br> var N, O;<br> for (N = q.vertices.length - 1; N >= 0; N--) {<br> O = q.vertices[N];<br> O.anchor = CAV.Vector3.clone(O.position);<br> O.step = CAV.Vector3.create(Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1));<br> O.time = Math.randomInRange(0, Math.PIM2)<br> }<br> }<br><br> function B() {<br> var O, N;<br> for (O = I.lights.length - 1; O >= 0; O--) {<br> N = I.lights[O];<br> I.remove(N)<br> }<br> D.clear();<br> for (O = 0; O < G.count; O++) {<br/> N = new CAV.Light(G.ambient, G.diffuse);<br/> N.ambientHex = N.ambient.format();<br/> N.diffuseHex = N.diffuse.format();<br/> I.add(N);<br/> N.mass = Math.randomInRange(0.5, 1);<br/> N.velocity = CAV.Vector3.create();<br/> N.acceleration = CAV.Vector3.create();<br/> N.force = CAV.Vector3.create()<br/> }<br/> }<br/><br/> function K(O, N) {<br/> D.setSize(O, N);<br/> CAV.Vector3.set(L, D.halfWidth, D.halfHeight);<br/> s()<br/> }<br/><br/> function o() {<br/> i = Date.now() - n;<br/> u();<br/> M();<br/> requestAnimationFrame(o)<br/> }<br/><br/> function u() {<br/> var Q, P, O, R, T, V, U, S = t.depth / 2;<br/> CAV.Vector3.copy(G.bounds, L);<br/> CAV.Vector3.multiplyScalar(G.bounds, G.xyScalar);<br/> CAV.Vector3.setZ(k, G.zOffset);<br/> for (R = I.lights.length - 1; R >= 0; R--) {<br> T = I.lights[R];<br> CAV.Vector3.setZ(T.position, G.zOffset);<br> var N = Math.clamp(CAV.Vector3.distanceSquared(T.position, k), G.minDistance, G.maxDistance);<br> var W = G.gravity * T.mass / N;<br> CAV.Vector3.subtractVectors(T.force, k, T.position);<br> CAV.Vector3.normalise(T.force);<br> CAV.Vector3.multiplyScalar(T.force, W);<br> CAV.Vector3.set(T.acceleration);<br> CAV.Vector3.add(T.acceleration, T.force);<br> CAV.Vector3.add(T.velocity, T.acceleration);<br> CAV.Vector3.multiplyScalar(T.velocity, G.dampening);<br> CAV.Vector3.limit(T.velocity, G.minLimit, G.maxLimit);<br> CAV.Vector3.add(T.position, T.velocity)<br> }<br> for (V = q.vertices.length - 1; V >= 0; V--) {<br> U = q.vertices[V];<br> Q = Math.sin(U.time + U.step[0] * i * t.speed);<br> P = Math.cos(U.time + U.step[1] * i * t.speed);<br> O = Math.sin(U.time + U.step[2] * i * t.speed);<br> CAV.Vector3.set(U.position, t.xRange * q.segmentWidth * Q, t.yRange * q.sliceHeight * P, t.zRange * S * O - S);<br> CAV.Vector3.add(U.position, U.anchor)<br> }<br> q.dirty = true<br> }<br><br> function M() {<br> D.render(I)<br> }<br><br> function J(O) {<br> var Q, N, S = O;<br> var P = function (T) {<br> for (Q = 0, l = I.lights.length; Q < l; Q++) {<br> N = I.lights[Q];<br> N.ambient.set(T);<br> N.ambientHex = N.ambient.format()<br> }<br> };<br> var R = function (T) {<br> for (Q = 0, l = I.lights.length; Q < l; Q++) {<br> N = I.lights[Q];<br> N.diffuse.set(T);<br> N.diffuseHex = N.diffuse.format()<br> }<br> };<br> return {<br> set: function () {<br> P(S[0]);<br> R(S[1])<br> }<br> }<br> }<br><br> function v() {<br> window.addEventListener("resize", j)<br> }<br><br> function A(N) {<br> CAV.Vector3.set(k, N.x, D.height - N.y);<br> CAV.Vector3.subtract(k, L)<br> }<br><br> function j(N) {<br> K(z.offsetWidth, z.offsetHeight);<br> M()<br> }<br><br> C();<br> })<br> } else {<br> alert('调用cav.js失败');<br> }<br>});<br>
