首页 > 网站建设 > 非常魔性的网站背景添加彩带效果JS代码分享
2018
12-29

非常魔性的网站背景添加彩带效果JS代码分享

免费支持本站

今天在网上找到了一段非常魔性的JS代码,可以实现网站背景彩带效果,就是本站现在的效果。感觉挺不错的,分享一下网站添加彩带效果的方法。效果下看图

非常魔性的网站背景添加彩带效果JS代码分享

原理:

利用ribbon.min.js脚本实现单击鼠标,彩带背景随机变换的网站背景效果,效果可见我的网站,很是有魔性。

特性:

这段代码不依赖于 jQuery 和 JavaScript 框架

轻量级,脚本只有 1.15kb 大小

非常容易使用

使用:

1、下载ribbon.min.js脚本文件:点击下载

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

3、添加下面代码到网站</body>标签之前即可,或者直接复制下面的代码新建一个JS文件,然后上传到网站引用。

/**

 * Copyright (c) 2016 hustcc

 * License: MIT

 * Version: v1.0.1

 * GitHub: https://github.com/hustcc/ribbon.js

**/

!function(){function e(e,t,n){return Number(e.getAttribute(t))||n}function t(){for(r.clearRect(0,0,h,s),a=[{x:0,y:.7*s+u},{x:0,y:.7*s-u}];a[1].x<h+u;)n(a[0],a[1])}function n(e,t){r.beginPath(),r.moveTo(e.x,e.y),r.lineTo(t.x,t.y);var n=t.x+(2*p()-.25)*u,o=i(t.y);r.lineTo(n,o),r.closePath(),m-=x/-50,r.fillStyle="#"+(127*y(m)+128<<16|127*y(m+x/3)+128<<8|127*y(m+x/3*2)+128).toString(16),r.fill(),a[0]=a[1],a[1]={x:n,y:o}}function i(e){return l=e+(2*p()-1.1)*u,l>s||l<0?i(e):l}var o=document.getElementsByTagName("script"),c=o[o.length-1];config={z:e(c,"zIndex",-1),a:e(c,"alpha",.6),s:e(c,"size",90)};var a,l,d=document.createElement("canvas"),r=d.getContext("2d"),g=window.devicePixelRatio||1,h=window.innerWidth,s=window.innerHeight,u=config.s,f=Math,m=0,x=2*f.PI,y=f.cos,p=f.random;d.width=h*g,d.height=s*g,r.scale(g,g),r.globalAlpha=config.a,d.style.cssText="position:fixed;top:0;left:0;z-index: "+config.z+";width:100%;height:100%;pointer-events:none;opacity:0.5;",document.getElementsByTagName("body")[0].appendChild(d),document.onclick=t,document.ontouchstart=t,t()}();

路由器交流群

支付宝打赏微信打赏