网页粒子背景插件 -Canvas-nest.js 指定具体位置展示

最新推荐文章于 2023-02-08 20:39:45 发布

坦GA

最新推荐文章于 2023-02-08 20:39:45 发布

阅读量580

点赞数

分类专栏：源码分析/架构深入/开源框架

源码分析/架构深入/开源框架专栏收录该内容

302 篇文章 3 订阅

订阅专栏

原文地址：https://blog.csdn.net/L1558198727/article/details/81121524

Canvas-nest.js是一个非常好看的网页粒子背景插件，不需要依赖任何第三方库即可运行，提供额非常炫酷的背景。但是默认的情况下是对整个body标签进行添加的，现在我们想让粒子指定具体的位置改怎么做呢？

①我们首先打开Canvas-nest.js官方的实现

(document.body, (f = document.getElementsByTagName("script"), {
        zIndex: (y = f[f.length - 1]).getAttribute("zIndex"),
        opacity: y.getAttribute("opacity"),
        color: y.getAttribute("color"),
        count: Number(y.getAttribute("count")) || 99
    }))

在最后的地方对这个实现的函数进行了调用，这里的参数是body，效果如下

这里写图片描述

②我们可以在这个将document.body替换成其他的元素，例如

html代码

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CanvasDemo</title>
</head>

<body>
    <div id="cas" style="position: absolute;width: 200px;height: 200px; left: 200px; z-index: 99999;"></div>
    <script src="dist/canvas-nest.js" type="text/javascript" color="255,0,0" opacity="0.5" count="200" ></script>

</body>
</html>

Canvas-nest.js中做如下修改

(document.getElementById("cas"), (f = document.getElementsByTagName("script"), {
        zIndex: (y = f[f.length - 1]).getAttribute("zIndex"),
        opacity: y.getAttribute("opacity"),
        color: y.getAttribute("color"),
        count: Number(y.getAttribute("count")) || 99
    }))

即可限制例子出现的位置

这里写图片描述

坦GA

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页粒子背景插件 -Canvas-nest.js 指定具体位置展示

原文地址：https://blog.csdn.net/L1558198727/article/details/81121524Canvas-nest.js是一个非常好看的网页粒子背景插件，不需要依赖任何第三方库即可运行，提供额非常炫酷的背景。但是默认的情况下是对整个body标签进行添加的，现在我们想让粒子指定具体的位置改怎么做呢？①我们首先打开Canvas-nest.js官方的实现(...
复制链接

扫一扫