MarioBoy

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

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

简介

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

效果预览

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

使用方法

  • 将该插件上传到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:March 26th, 2019 at 10:34 pm
If you think my article is useful to you, please feel free to appreciate

26 comments

  1. STAR.

    大佬可以交换友链吗|´・ω・)ノ

  2. marTixx

    有个bug:当你翻到下面了,线条就没了,就是说线条只浮在页面顶部。还希望作者尽快优化卡顿问题

  3. fpjo

    我的网站用你的这个插件时,鼠标滚轮失效了

  4. 橙子

    在本地测试的时候,使用起来很卡,有没有什么解决办法啊

    1. MarioBoy
      @橙子

      这个特效确实非常占资源,我寒假会优化一下,加入一些性能有关的选项,关闭一些占资源的特效

  5. 阿七's Blog

    handsome主题启用插件没反应啊

    1. MarioBoy
      @阿七's Blog

      不会啊,我这里是可以的,而且我们的主题是一样的吧,你可以插件管理设置看一看。寒假我会优化,

  6. QAQ

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

    1. MarioBoy
      @QAQ

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

      1. QAQ
        @MarioBoy

        那要怎么处理呀QAQ

  7. un

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

    1. MarioBoy
      @un

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

  8. 学林

    厉害厉害

    1. 长江
      @学林

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

  9. roger

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

    1. 长江
      @roger

      就是这个效果

  10. 学习笔记Blog

    这个好酷呀!厉害!

  11. 黄河

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

    1. 黄河
      @黄河

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

      1. 长江
        @黄河

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

  12. 哈哈
    该评论仅登录用户及评论双方可见
    1. MarioBoy
      @哈哈

      最近太忙了,待我寒假解决

  13. GoL

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

    1. 长江
      @GoL

      你可以试一下最新版。

  14. 性感六

    为何我启动之后没反应

    1. 长江
      @性感六

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

Leave a Comment