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

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
    }))

即可限制例子出现的位置

这里写图片描述

猜你喜欢

转载自blog.csdn.net/l1558198727/article/details/81121524
今日推荐