MarioBoy

typecho插件:筑巢特效(动态线条聚合)
简介一个基于 html5 canvas 绘制的网页背景效果的typecho插件。说明:本插件部分js代码来自开源g...
扫描右侧二维码阅读全文
13
2018/07

typecho插件:筑巢特效(动态线条聚合)

简介

一个基于 html5 canvas 绘制的网页背景效果的typecho插件。
说明:本插件部分js代码来自开源github
可以在网页上绘制出蛛网般的动态线条,随鼠标移动聚合。
作者:MarioBoy
作者博客:MarioBoy

效果预览

筑巢特效
点击查看网页特效

使用方法

  • 将该插件上传到typecho目录下的usr/plugins目录下
  • 启用插件
  • 自定义选项(如下图)
    插件设置界面
  • 线条颜色是RGB值。红色是255,0,0 绿色是0,255,0 蓝色是0,0,255 默认是蓝色
  • 线条数量即为屏幕上的线条数,不宜过大。
  • 线条透明度建议为0.5~1
  • zindex 是显示优先级,如果值较低,则有可能被其他元素遮盖住。所以建议填写100,这样即可在所有元素上显示。

特性

  • 不依赖 jQuery,使用原生的 javascript。
  • 非常小,只有 2 Kb。
  • 非常容易实现,配置简单,即使你不是 web 开发者,也能简单搞定。

插件下载

点此下载
注意:下载下来后请将文件夹重命名为DynamicLines

GitHub地址

Github地址(所有更新都将发布在github)
求求你们了,给我个star吧

源代码展示

代码截图

更新日志

2018-07-15

  • 插件完成。主体功能上线。

2018-08-20更新

  • 添加zindex选项,用户可以自己调节特效的显示优先级。
  • 修复js文件路径bug

文章版权

  • 所有原创文章知识共享署名-非商业性使用 4.0国际许可协议进行许可。你可以分享、修改文章内容,但必须署名,并且不能用于商业目的,除此之外没有任何限制。
  • 所有转载文章保留原作者链接,继承与原作者相同的知识创作协议。

打赏这个不要脸的博主

博主暂时处于学习阶段,生活费拮据,如果我的项目能让你开心,有笔额外的收入没有什么比这更让我有前进的动力了。
比心

Last modification:October 16th, 2018 at 11:36 pm
If you think my article is useful to you, please feel free to appreciate

18 comments

  1. QAQ

    它一直会在我的正下方,我的网站:www.hjjyxd.com,请问这是什么原因
    我的QQ是1557585491

    1. MarioBoy
      @QAQ

      你这个bug我还是第一次遇到

      1. QAQ
        @MarioBoy

        那要怎么处理呀QAQ

  2. un

    请问为什么手机端会显示,已经设置不显示了?

    1. MarioBoy
      @un

      额,新的bug,改天修复下。

  3. 学林

    厉害厉害

    1. 长江
      @学林

      没有没有,差得很远呢 ,互相学习哈

  4. roger

    鼠标不动,线条抖动。能否稳定一下?

    1. 长江
      @roger

      就是这个效果

  5. 学习笔记Blog

    这个好酷呀!厉害!

  6. 黄河

    在这个主题https://github.com/Dreamer-Paul/Single里面使用,只有主页有效果,其他页面不显示,调试工具显示是因为js文件没找到,能否改进一下,谢谢。

    1. 黄河
      @黄河

      解决了,把插件链接的JS路径改为了绝对路径,显示了。但是在文章页的文章区域,线是不跟随鼠标的。

      1. 长江
        @黄河

        谢谢支出问题,路径问题已经解决,文章区域也可以跟随鼠标移动了

  7. 哈哈
    该评论仅登录用户及评论双方可见
  8. GoL

    谢谢博主,已经使用上了。但是发现只有主页上的一小块有效果,要怎么做才能向你这样有一个单独的界面来显示呢

    1. 长江
      @GoL

      你可以试一下最新版。

  9. 性感六

    为何我启动之后没反应

    1. 长江
      @性感六

      这是一个zindex显示层级的问题,目前已经在插件的设置中增加了覆盖顺序选项,可将其设置为较大的值(99)即可,这样就会在所有元素上显示。

Leave a Comment