评论：html5粒子效果背景  [查看原文]

所属分类：其他,UI-动画效果,背景

 160905  1251  116
当前第4页 / 共4页
    someone.sth0
    2016/11/2 18:11:41
    您好！鼠标进入区域上面的点 怎么只能在一定范围内 拖动 页面底部 没效果 宽高限制 只找到了点的限制  拖动距离 未找到 求指教 Q ：864031711 回复
    locoti0
    2016/10/20 11:10:28
    1：看到获取的这个body没有，把它换成你要设置的di2：将canvas大小重新设置一下3：测试OK
        稻草人0
        2016/10/27 22:10:45
        你好。在chrome很成功， 但在手机上访问，发现背景被顶到了所有网页的最下面(一幅空的粒子效果背景，上面是网页内容   )请问这是什么问题？
        稻草人0
        2016/10/27 22:10:26
        用chrome上的手机模拟也OK，但是实际用就不行了
        清冷丶0
        2017/4/11 0:36:08

        安卓手机和windows电脑都正常，ipad不能正常显示。。也是粒子会跑到最下方

        清冷丶1
        2017/4/11 8:21:11

        问题已解决

        代码第46行改为

        canvas.element.style.position = "absolute";
canvas.element.style.top = "0px";
canvas.element.style.left = "0px";
canvas.element.style.zIndex = -1;

        即可

    回复
    技术部―付友0
    2016/10/20 9:10:58
    怎么定义只在一个500X500像素的一个div里面执行呢
        locoti1
        2016/10/20 11:10:44

        1：代码12行，换成你要获取的div，

        var body = getELementById("body");

        2：代码68，69行，重新设置canvas大小

        canvas.width = parseInt(body.style.width);
canvas.height = parseInt(body.style.height);

        不能回复图片，如果不懂继续问我。

        想喝却怕喝醉的酒0
        2016/12/21 11:12:41

        我按照您的上述方法改了,却报错了,显示body(div)未定义;style也显示不可用,求解

        locoti0
        2017/6/24 15:14:37

        不好意思，工作了长时间没上线，特来更正一下。

        需要如下更改，这里如果看不清楚的话，可以到github项目看具体更改了哪些地方。

        html修改：添加想要的div

        <!-- 背景div -->
<div id="mydiv" style="width: 500px;height:500px;"></div>

        js文件修改：

        1：12行获取背景改

        // 获取body作为背景
// var body = getElementByTag("body")[0];
// 获取特定div作为背景
// mydiv是你想要将其作为背景的div的ID
var body = document.getElementById("mydiv");

        2：68，69行设置canvas大小改

        // 获取窗口的宽高
// canvas.width = window.innerWeight || document.documentElement.clientWidth || document.body.clientWidth;
// canvas.height = window.innerWeight || document.documentElement.clientHeight || document.body.clientHeight;
// 获取特定div的宽高
var width = document.getElementById("mydiv").style.width;
var height = document.getElementById("mydiv").style.height;
width = parseInt(width);
height = parseInt(height);
canvas.width = width || window.innerWeight || document.documentElement.clientWidth || document.body.clientWidth;
canvas.height = height || window.innerWeight || document.documentElement.clientHeight || document.body.clientHeight;
    回复
    025Journey0
    2016/10/18 15:10:56
    怎么制作呢
        locoti0
        2016/10/19 14:10:19
        怎么制作。。这个，你可以研究研究代码，写了注释，不懂可以继续追问
    回复
    sdf0
    2016/10/14 20:10:24
    颜色怎么改不了？
        locoti1
        2016/10/19 14:10:25
        可以改呀，配置好config后传入CanvasParticle(config);函数调用就可以了嘛
        locoti1
        2017/6/24 14:04:05
        可以改如下配置,里面能够更改颜色的 vx：小球横向速度vy：小球纵向速度height：小球高咯count：设置画布中小球个数color：小球颜色stroke：线条颜色dist：两个小球出现连线的距离e_dist：鼠标吸附小球的距离max_conn：小球之间最大的线条连接数
        locoti1
        2017/6/24 14:06:02
        可以改如下配置，里面能够更改颜色的：vx：小球横向速度vy：小球纵向速度height：小球高咯count：设置画布中小球个数color：小球颜色stroke：线条颜色dist：两个小球出现连线的距离e_dist：鼠标吸附小球的距离max_conn：小球之间最大的线条连接数
        locoti0
        2017/6/24 15:15:56

        格式为什么总是不对呀，还是我不会玩。

        可以更改下面的配置，有颜色可以配置的：

           //配置
   var config = {
       vx: 4,//小球x轴速度,正为右，负为左
       vy: 4,//小球y轴速度
       height: 2,//小球高宽，其实为正方形，所以不宜太大
       width: 2,
       count: 100,//点个数
       color: "121, 162, 185", //点颜色
       stroke: "130,255,255", //线条颜色
       dist: 6000, //点吸附距离
       e_dist: 20000, //鼠标吸附加速距离
       max_conn: 10 //点到点最大连接数
   }
    回复
    葛星0
    2016/10/14 0:10:05
    很炫酷，膜拜！ 回复
    若是，若0
    2016/9/24 0:09:12

    Web项目下包括canvas-particle.js，peizhi.js和aa.html，然后通过aa.html,在<head>里面写

    <script type="text/javascript" src="canvas-particle.js"></script>

    调用canvas-particle.js，写

    <script src="peizhi.js"></script>

    调用peizhi.js，是这样子么？？

        locoti1
        2016/9/25 19:09:47

        嗯，两个js在head中引入，在你的peizhi.js加上

        window.onload = function() {
    //配置
    var config = {
        vx: 4,
        //点x轴速度,正为右，负为左
        vy: 4,
        //点y轴速度
        height: 2,
        //点高宽，其实为正方形，所以不宜太大
        width: 2,
        count: 100,
        //点个数
        color: "121, 162, 185",
        //点颜色
        stroke: "130,255,255",
        //线条颜色
        dist: 6000,
        //点吸附距离
        e_dist: 20000,
        //鼠标吸附加速距离
        max_conn: 10 //点到点最大连接数
    }
    //调用  
    CanvasParticle(config); 
}

        在window.onload里面调用CanvasParticle函数就ok

    回复
    741339/@/0
    2016/9/22 20:09:49
    你好我想请问怎么把这个特效作为一个背景？方便的话留个qq可好
        西瓜0
        2016/9/22 21:09:54
        Css浮动层到特效上面。
        741339/@/0
        2016/9/22 21:09:56
        大神具体怎么弄啊，试过了不行啊，我是个新手能帮我看看嘛
        西瓜0
        2016/9/22 22:09:10

        以下简单的Css浮动例子，自己研究了，这都是基础。

        <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
.a1 { float: left; position: relative; widht: 100px; border: 0; height: 500px; width: 500px; margin-left: 300px; background-color: #9CC; }
.b1 { position: absolute; top: 50%; margin-top: -25px; left: 50%; margin-left: -25px; background-color: #666; height: 50px; width: 50px; }
</style>
</head>

<body>
<div class='a1'>
  <div class='b1'></div>
</div>
</body>
</html>
        741339/@/0
        2016/9/22 22:09:28
        谢谢你明白了
        locoti0
        2016/9/23 9:09:09
        弄好了没，也可以直接clone我的代码看看，用起来还是蛮简单的
        741339/@/0
        2016/9/23 11:09:49
        恩恩，解决了哈哈，谢谢
        Timli0
        2017/5/16 10:25:12

        哇 谢谢

    回复
    CIMI-Sherry0
    2016/9/18 14:09:28
    我能玩一天
        locoti0
        2016/9/19 17:09:35
        哈哈，不要手抖
    回复
    夜De第七章0
    2016/9/18 10:09:02
    挺好看
        locoti0
        2016/9/19 17:09:25
        谢谢支持
    回复
    Jreey0
    2016/9/13 16:09:19
    {
    vx: 4,
    vy: 4,
    height: 2,
    width: 2,
    count: 150,
    color: "121, 162, 185",
    stroke: "100,200,180",
    dist: 6000,
    e_dist: 20000,
    max_conn: 10
}

    想请教一下 你这段代码都声明了什么东西？

        locoti0
        2016/9/14 9:09:31
        嗯，注释没写好，见谅。vx：小球横向速度vy：小球纵向速度height：小球高咯count：设置画布中小球个数color：小球颜色stroke：线条颜色dist：两个小球出现连线的距离e_dist：鼠标吸附小球的距离max_conn：小球之间最大的线条连接数
        locoti1
        2016/9/14 9:09:37

        改一下

        vx：小球横向速度
vy：小球纵向速度
height：小球高咯
count：设置画布中小球个数
color：小球颜色
stroke：线条颜色
dist：两个小球出现连线的距离
e_dist：鼠标吸附小球的距离
max_conn：小球之间最大的线条连接数
        locoti0
        2016/9/14 9:09:21
        好吧，错了，回复格式化居然是摆设
    回复
    22.10
    2016/9/6 14:09:02
    厉害，不过有个小bug，不关闭页面的情况下，切换到其他页面再回来的时候，粒子不随鼠标引导了
        网事如风0
        2016/9/6 20:09:46
        鼠标移开当前页面都不行了
        locoti0
        2016/9/7 10:09:38
        嗯嗯，不知为何演示会有这个bug，但是我项目没有的，大家也可以去github（https://github.com/LocoTi/CanvasParticles）里面clone下来看看
        西瓜0
        2016/9/7 11:09:57
        更新了，好了。
    回复

讨论这个项目（116）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

取消回复