马黑PHP整站系统

rainyday插件试用心得

位置: 首页 > JS插件[ 发布时间: 2024.5.8  作者: 马黑  阅读: 66 ]

rainyday 是模拟雨天窗玻璃凝结水珠子的一个JS插件,作者 Marek Brodziak,官网 https://mubaidr.js.org/rainyday.js/,当前版本 v0.1.7,16.5KB大小,开源项目。

插件使用canvas画布绘制动态水珠,效果逼真到令人叹为观止。尝试将其用到帖子过程中碰上不少问题,意欲放弃,但实在难舍其浑然天成的特效,牺牲一个午休时间,终将其降服,成功用到帖子中来。

问题出在rainyday的布局上。新版本提供 parentElement 参数,就是canvas画布宿主,如若不配置,默认使用body,这将占用浏览器全部的可视区域乃至更多。若设置了 parentElement 参数,宿主元素相对定位的情况下,canvas画布的自动偏移非常离谱,具体是随宿主元素 margin 属性值偏移。论坛做宽幅帖子,需要宿主元素相对定位,所以不能通过帖子容器元素直接定位canvas画布,需要另外一个绝对定位的子元素来装载rainyday追加的画布,即便如此,rainyday追加的canvas画布仍然受到宿主元素的父元素的 margin 属性所影响,还需要额外处理:通过JS获得对canvas的操作权限,然后将其left和top设置为0。以下是具体处理代码:

<script>     var engine;     var sF = document.createElement('script');     sF.src = 'https://638183.freep.cn/638183/web/js/rainyday.js';     document.body.appendChild(sF);     sF.onload = function() {         var image = new Image();         image.crossOrigin = 'anonymous';         image.onload = function() {             engine = new RainyDay({                 image: this,                 parentElement: mama,             });             var canv = document.querySelector('#papa canvas');             canv.style.cssText += 'left: 0; top: 0';             mState();         };         image.src = 'https://638183.freep.cn/638183/t24/2/f11.jpeg';             var mState = () => {             papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');             aud.paused ? engine.pause() : engine.resume();         };         aud.onplaying = aud.onpause = () => mState();         papa.onclick = () => aud.paused ? aud.play() : aud.pause();     }; </script>

上述代码第14、15行就是强行将rainyday绘制的canvas画布的左上角强行拉回 id="mama" 的div容器的左上角,mama则是帖子容器元素的子元素,宽高100%,绝对定位,与帖子容器元素贴合。

rainyday插件的必填参数 image 支持有背景图片的元素,举例说,如果帖子容器带有背景图片,则可以直接将其 id 作为 image 参数的值,这其实是最理想的做帖子的姿势——水珠特效基本就约束在帖子容器里。但有个前提:图片必须是同源图片,就是说不能是跨域图片。还有一个小问题:margin-top、margin-bottom依然会影响canvas的位置。对于图片跨域,由于 crossOrigin 只针对图片、音视频等媒体,只有通过修改插件源码解决问题,但如果使用的是官网或第三方的资源,我们没有修改权限;对于外边距的上下边距对画布位置的影响,解决方法是不设置这两个值或设为 0 便可。

演示实例地址一:http://mhh.52qingyin.cn/art/bshow.php?st=3&sd=3&art=mahei_1715127196

演示实例地址二:http://qhxy.52qingyin.cn/art/bshow.php?st=4&sd=4&art=uvuz_1715127531

前一篇: dot-lz.js使用说明
下一篇: 《碧瑶 - 小池塘》所使用的JS资源相关说明

发表评论:

       

评论列表 [2条]

#2 | 悄然 于 2024-5-8 09:29 发布: 试用效果完美~~这个是真的漂亮。。神奇的美丽的代码世界。。

#1 | 飞飞 于 2024-5-8 09:24 发布: 这些插件还是需要更改才可以用到贴子里,只有强悍的黑师可以做到。。太漂亮了。。我去试一下平时做贴用的宽幅。。

Copyright © 2023 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com