«

JS粒子效果插件的引入

yang 发布于 阅读:368 JS基础阶段


1.登录JS插件库 www.jq22.com
2.搜索 粒子效果,选择合适的插件下载源码
3.根据源码提示将插件引入项目
    3-1.引入js文件
        <script type="text/javascript" src="canvas-particle.js"></script>
    3-2.配置,调用CanvasParticle函数,传入配置参数即可,如果不配置则用默认配置
        window.addEventListener("load", function () {
            //配置
            const config = {
                selector: "#bannerBg",
                vx: 4, //点x轴速度,正为右,负为左
                vy: 4, //点y轴速度
                height: 2, //点高宽,其实为正方形,所以不宜太大
                width: 2,
                count: 100, //点个数
                color: "#000", //点颜色
                stroke: "0,0,0", //线条颜色
                dist: 6000, //点吸附距离
                e_dist: 20000, //鼠标吸附加速距离
                max_conn: 10, //点到点最大连接数
            };
            //调用
            CanvasParticle(config);
        });

JS粒子效果插件的引入

版权所有:微4e
文章标题:JS粒子效果插件的引入
除非注明,文章均为 微4e 原创,请勿用于任何商业用途,禁止转载

推荐阅读:


扫描二维码,在手机上阅读
请先 登录 再评论