全站添加元素飘落效果-默认枫叶效果-优化版搬砖的小易4个月前更新关注私信04914 这个功能其实很多朋友应该都有之前的那种樱花效果,但是用过的都知道那个樱花效果太妨碍阅读了,今天分享给大家一个优化版,减少了数量以及效果优化 安装 将下面的这段代码整合到新建 js 文件,命名 leaves.js,然后引用,就可以看到效果了,我就不上预览图了 默认效果是枫叶,如果想改成其他的可自行更换代码第三行中的文件图片矢量图, <script src="你上传的文件路径地址/leaves.js"></script> var stop, staticx; var img = new Image(); img.src = "https://p1.xywm.ltd/2022/07/31/62e604b42d4cf.webp"; function Sakura(x, y, s, r, fn) { this.x = x; this.y = y; this.s = s; this.r = r; this.fn = fn } Sakura.prototype.draw = function(cxt) { cxt.save(); var xc = 20 * this.s / 2; cxt.translate(this.x, this.y); cxt.rotate(this.r); cxt.drawImage(img, 0, 0, 20 * this.s, 20 * this.s); cxt.restore() }; Sakura.prototype.update = function() { this.x = this.fn.x(this.x, this.y); this.y = this.fn.y(this.y, this.y); this.r = this.fn.r(this.r); if (this.x > window.innerWidth || this.x < 0 || this.y > window.innerHeight || this.y < 0) { this.r = getRandom("fnr"); if (Math.random() > 0.4) { this.x = getRandom("x"); this.y = 0; this.s = getRandom("s"); this.r = getRandom("r") } else { this.x = window.innerWidth; this.y = getRandom("y"); this.s = getRandom("s"); this.r = getRandom("r") } } }; SakuraList = function() { this.list = [] }; SakuraList.prototype.push = function(sakura) { this.list.push(sakura) }; SakuraList.prototype.update = function() { for (var i = 0, len = this.list.length; i < len; i++) { this.list[i].update() } }; SakuraList.prototype.draw = function(cxt) { for (var i = 0, len = this.list.length; i < len; i++) { this.list[i].draw(cxt) } }; SakuraList.prototype.get = function(i) { return this.list[i] }; SakuraList.prototype.size = function() { return this.list.length }; function getRandom(option) { var ret, random; switch (option) { case "x": ret = Math.random() * window.innerWidth; break; case "y": ret = Math.random() * window.innerHeight; break; case "s": ret = Math.random(); break; case "r": ret = Math.random() * 4; break; case "fnx": random = -0.5 + Math.random() * 1; ret = function(x, y) { return x + 0.5 * random - 1.7 }; break; case "fny": random = 1.5 + Math.random() * 0.7; ret = function(x, y) { return y + random }; break; case "fnr": random = Math.random() * 0.03; ret = function(r) { return r + random }; break } return ret } function startSakura() { requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame; var canvas = document.createElement("canvas"), cxt; staticx = true; canvas.height = window.innerHeight; canvas.width = window.innerWidth; canvas.setAttribute("style", "position: fixed;left: 0;top: 0;pointer-events: none;"); canvas.setAttribute("id", "canvas_sakura"); document.getElementsByTagName("body")[0].appendChild(canvas); cxt = canvas.getContext("2d"); var sakuraList = new SakuraList(); for (var i = 0; i < 50; i++) { var sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny; randomX = getRandom("x"); randomY = getRandom("y"); randomR = getRandom("r"); randomS = getRandom("s"); randomFnx = getRandom("fnx"); randomFny = getRandom("fny"); randomFnR = getRandom("fnr"); sakura = new Sakura(randomX, randomY, randomS, randomR, { x: randomFnx, y: randomFny, r: randomFnR }); sakura.draw(cxt); sakuraList.push(sakura) } stop = requestAnimationFrame(function() { cxt.clearRect(0, 0, canvas.width, canvas.height); sakuraList.update(); sakuraList.draw(cxt); stop = requestAnimationFrame(arguments.callee) }) } window.onresize = function() { var canvasSnow = document.getElementById("canvas_snow") }; img.onload = function() { startSakura() }; function stopp() { if (staticx) { var child = document.getElementById("canvas_sakura"); child.parentNode.removeChild(child); window.cancelAnimationFrame(stop); staticx = false } else { startSakura() } }; 供学习和研究使用,禁止商业用途 购买前可以联系作者确认资源信息,防止交易矛盾 © 版权声明 版权声明 1 本网站名称:易幻云资源网 2 本站永久网址:https://www.yihuanyun.cc 3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长 QQ2956667505进行删除处理。 4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。 5 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报 6 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。 THE END美化教程 喜欢就支持一下吧点赞14收藏