【atool在线工具】科技感十足的酷炫网页背景效果分享

2016年10月24日 评论 1,958 2192字阅读7分18秒

很久之前看到atool在线工具网站用了这个背景,现在心血来潮也搬过来用了,下面就记录一下用法以便童靴们易于操作。

原理:
利用canvas-nest.js脚本实现canvas上绘制的蜂窝状网站背景,效果可见我的网站,很是有魔性。

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

看看效果图

【atool在线工具】科技感十足的酷炫网页背景效果分享

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

2、通过FTP等方法上传到自己网站上,得到脚本的URL链接。

3、添加下面代码到网站</body>标签之前即可(注意:下面src后面的链接替换为上一步得到的脚本链接)

<script src="http://github.atool.org/canvas-nest.min.js" type="text/javascript"></script>

大鸟提示:完成上述操作之后别忘了更新缓存哦!有人的电脑下载提示会乱显示什么危险文件啊,可以直接用源代码保存为js文件也可以。我贴出这个背景文件的js源代码,动手能力强的还可以自己修改代码

!function(){function o(w,v,i){return w.getAttribute(v)||i}function j(i){return document.getElementsByTagName(i)}function l(){var i=j("script"),w=i.length,v=i[w-1];return{l:w,z:o(v,"zIndex",-1),o:o(v,"opacity",0.5),c:o(v,"color","255,0,0"),n:o(v,"count",99)}}function k(){r=u.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,n=u.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}function b(){e.clearRect(0,0,r,n);var w=[f].concat(t);var x,v,A,B,z,y;t.forEach(function(i){i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>r||i.x<0?-1:1,i.ya*=i.y>n||i.y<0?-1:1,e.fillRect(i.x-0.5,i.y-0.5,1,1);for(v=0;v<w.length;v++){x=w[v];if(i!==x&&null!==x.x&&null!==x.y){B=i.x-x.x,z=i.y-x.y,y=B*B+z*z;y<x.max&&(x===f&&y>=x.max/2&&(i.x-=0.03*B,i.y-=0.03*z),A=(x.max-y)/x.max,e.beginPath(),e.lineWidth=A/2,e.strokeStyle="rgba("+s.c+","+(A+0.2)+")",e.moveTo(i.x,i.y),e.lineTo(x.x,x.y),e.stroke())}}w.splice(w.indexOf(i),1)}),m(b)}var u=document.createElement("canvas"),s=l(),c="c_n"+s.l,e=u.getContext("2d"),r,n,m=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(i){window.setTimeout(i,1000/45)},a=Math.random,f={x:null,y:null,max:20000};u.id=c;u.style.cssText="position:fixed;top:0;left:0;z-index:"+s.z+";opacity:"+s.o;j("body")[0].appendChild(u);k(),window.onresize=k;window.onmousemove=function(i){i=i||window.event,f.x=i.clientX,f.y=i.clientY},window.onmouseout=function(){f.x=null,f.y=null};for(var t=[],p=0;s.n>p;p++){var h=a()*r,g=a()*n,q=2*a()-1,d=2*a()-1;t.push({x:h,y:g,xa:q,ya:d,max:6000})}setTimeout(function(){b()},100)}();

以上代码保存为js文件丢到服务器上根目录啊,或者js文件夹内,然后得到路径就可以使用了!

  • 我的微信
  • 分享宝塔面板建站技术交流等!
  • weinxin
  • 微信公众号
  • 关注本博公众号
  • weinxin
大鸟
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: