精美的鼠标拖动滑丝动画效果代码
代码语言:html
所属分类:动画
代码描述:精美的鼠标拖动滑丝动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFW NEW PAGE</title> <style type="text/css"> * { margin: 0; padding: 0; list-style-type: none; } body { font: 500 .875em PingFang SC,Lantinghei SC,Microsoft Yahei,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,sans; background-color: #07040e; } #canvas { position: absolute; z-index: 10; top: 0; left: 0; bottom: 0; right: 0; cursor: none; } </style> </head> <body> <canvas id="canvas" width="1800" height="900"></canvas> <script type="text/javascript"> var Stats = function () { var e = Date.now(), t = e, i = 0, n = 1 / 0, r = 0, s = 0, o = 1 / 0, a = 0, l = 0, h = 0, c = document.createElement("div"); c.id = "stats", c.addEventListener("mousedown", function (e) { e.preventDefault(), v(++h % 2) }, !1), c.style.cssText = "width:80px;opacity:0.9;cursor:pointer"; var u = document.createElement("div"); u.id = "fps", u.style.cssText = "padding:0 0 3px 3px;text-align:left;background-color:#002", c.appendChild(u); var d = document.createElement("div"); d.id = "fpsText", d.style.cssText = "color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px", d.innerHTML = "FPS", u.appendChild(d); var p = document.createElement("div"); for (p.id = "fpsGraph", p.style.cssText = "position:relative;width:74px;height:30px;background-color:#0ff", u.appendChild(p); 74 > p.children.length;) { var f = document.createElement("span"); f.style.cssText = "width:1px;height:30px;float:left;background-color:#113", p.appendChild(f) } var m = document.createElement("div"); m.id = "ms", m.style.cssText = "padding:0 0 3px 3px;text-align:left;background-color:#020;display:none", c.appendChild(m); var g = document.createElement("div"); g.id = "msText", g.style.cssText = "color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px", g.innerHTML = "MS", m.appendChild(g); var y = document.createElement("div"); for (y.id = "msGraph", y.style.cssText = "position:relative;width:74px;height:30px;background-color:#0f0", m.appendChild(y); 74 > y.children.length;) { var f = document.createElement("span"); f.style.cssText = "width:1px;height:30px;float:left;background-color:#131", y.appendChild(f) } var v = function (e) { switch (h = e) { case 0: u.style.display = "block", m.style.display = "none"; break; case 1: u.style.display = "none", m.style.display = "block" } }, b = function (e, t) { var i = e.appendChild(e.firstChild); i.style.height = t + "px" }; return { REVISION: 11, domElement: c, setMode: v, begin: function () { e = Date.now() }, end: function () { var h = Date.now(); return i = h - e, n = Math.min(n, i), r = Math.max(r, i), g.textContent = i + " MS (" + n + "-" + r + ")", b(y, Math.min(30, 30 - 30 * (i / 200))), l++, h > t + 1e3 && (s = Math.round(1e3 * l / (h - t)), o = Math.min(o, s), a = Math.max(a, s), d.textContent = s + " FPS (" + o + "-" + a + ")", b(p, Math.min(30, 30 - 30 * (s / 100))), t = h, l = 0), h }, update: function () { e = this.end() } } }; </script> <script type="text/javascript"> (function (window) { var ctx, hue, logo, form, buffer, target = {}, tendrils = [], settings = {}; settings.debug = true; settings.friction = 0.5; settings.trails = 20; settings.size = 50; settings.dampening = 0.25; settings.tension = 0.98; Math.TWO_PI = Math.PI * 2; function Oscillator(options) { this.init(options || {}); } Oscillator.prototype = (function () { var value = 0; return { init: function (options) { this.phase = options.phase || 0; this.offset = options.offset || 0; this.frequency = options.frequency || 0.001; this.amplitude = options.amplitude || 1; }, update: function () { this.phase += this.frequency; value = this.offset + Math.sin(this.phase) * this.amplitude; return value; }, value: function () { return value; } }; })(); function Tendril(options) { this.init(options || {}); } Tendril.prototype = (function () { function Node() { this.x = 0; this.y = 0; this.vy = 0; this.vx = 0; } return { init: function (options) { this.spring = options.spring + (Math.random() * 0.1) - 0.05; this.friction = settings.friction + (Math.random() * 0.01) - 0.005; this.nodes = []; for (var i = 0, node; i < settings.size; i++) { node = new Node(); node.x = target.x; node.y = target.y; this.nodes.push(node); } }, update: function () { var spring = this.spring, node = this.nodes[0]; node.vx += (target.x - node.x) * spring; node.vy += (target.y - node.y) * spring; for (var prev, i = 0, n = this.nodes.length; i < n; i++) { node = this.nodes[i]; if (i > 0) { prev = this.nodes[i - 1]; node.vx += (prev.x - node.x) * spring; node.vy += (prev.y - node.y) * spring; node.vx += prev.vx * settings.dampening; node.vy += prev.vy * settings.dampening; } node.vx *= this.friction; node.vy *= this.friction; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0