看到别人家的博客有这个特效,草鸡喜欢,幸好群里大神给了教程:顺手牵羊占过来了,喜欢的同鞋可以用到。大神: @

漂亮的无序蜂窝特效,带鼠标悬停吸咐事件。

特性:
不依赖于 jQuery 和 JavaScript 框架
轻量级,只有 1.66kb 大小
非常容易使用

使用:
1、下载canvas-nest.min.js脚本文件:点击下载

2、通过FTP等方法上传到自己网站上

3、在</body>标签之前引用该js文件即可。

小白法:

找到主题的footer.php,在</body>前加上这么一段js代码:

<script src="http://oijbbaxnm.bkt.clouddn.com/canvas-nest.min.js" type="text/javascript"></script>

注意:

开启ssl的站点是不支持http的引用的,所以还是老老实实本地引用:

把js文件放到根目录,然后:

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

(绝对路径别搞错就行)

刷新就可以看到效果啦。开了cdn的小伙伴记得刷新下自己的cdn缓存

 

想换蜂窝颜色透明度或者数量,修改js文件里面的opacity、color和count数值即可。

 


关于引用js

如果想和主题打包一起走最好还是放到主题目录js文件夹里,上文引用src有条件,即网站固定链接不会变,如果固定链接改变,则引用路径会跟着改变从而获取不到js文件,出现404

另外,上文引用手机端也会加载,所以最好改成固定物理链接并且判断手机端不加载(地止为当前php文件地址/js/canvas-nest.min.js; 请跟据实际情况修改):

 

<script>
if (screen && screen.width > 480) {
document.write('<script src="<?php bloginfo('template_url'); ?>/js/canvas-nest.min.js" type="text/javascript"><\/script>');
}
</script>


真正的英雄主义,是认清生活的真相后还依然热爱它。