【Web】自定义网页漂浮物

素材选取

先找一张想漂浮的素材,举例这张滑稽:

在这里插入图片描述

调整大小

一般宽度为 300 - 400,其余可自试。

去底

免费调整大小和去底网站:压缩图

调整大小只需要改宽度一个即可(自动按比例缩放):

在这里插入图片描述

之后去底,容差 0 即可:

在这里插入图片描述

如果去底去的不好,还有一个专用去底网站:Remove.bg

压缩

图片太大最好压缩一下,而且漂浮也不需要很高的清晰度:熊猫 PNG 压缩

转换

把图片转为 base64 可以避免重复请求和减小大小,可使用:站长工具

在这里插入图片描述

自定义 JS

代码
var floating_quantity=40;
var img_base64='';
var a=['appendChild','setAttribute','rotate','fny','canvas','style','createElement','innerHeight','onload','update','height','fnr','canvas_floating','innerWidth','random','translate','size','width','fnx','cancelAnimationFrame','length','list','body','requestAnimationFrame','getContext','getElementById','canvas_snow','webkitRequestAnimationFrame','draw','prototype','mozRequestAnimationFrame','save','position:\x20fixed;left:\x200;top:\x200;pointer-events:\x20none;','getElementsByTagName','push','removeChild','parentNode'];(function(b,e){var f=function(g){while(--g){b['push'](b['shift']());}};f(++e);}(a,0x1ae));var b=function(c,d){c=c-0x0;var e=a[c];return e;};var stop,staticx,img=new Image();function Floating(c,d,e,f,g){this['x']=c,this['y']=d,this['s']=e,this['r']=f,this['fn']=g;}function getRandom(c){var d,e;switch(c){case'x':d=Math[b('0x1c')]()*window[b('0x1b')];break;case'y':d=Math['random']()*window['innerHeight'];break;case's':d=Math[b('0x1c')]();break;case'r':d=0x6*Math['random']();break;case b('0x20'):e=0x1*Math[b('0x1c')]()-0.5,d=function(f,g){return f+0.5*e-1.7;};break;case'fny':e=1.5+0.7*Math[b('0x1c')](),d=function(f,g){return g+e;};break;case'fnr':e=0.03*Math[b('0x1c')](),d=function(f){return f+e;};}return d;}function startFloating(){requestAnimationFrame=window[b('0x0')]||window[b('0x7')]||window[b('0x4')]||window['msRequestAnimationFrame']||window['oRequestAnimationFrame'];var c=document[b('0x14')](b('0x12')),d;staticx=!0x0,c[b('0x18')]=window[b('0x15')],c[b('0x1f')]=window[b('0x1b')],c['setAttribute'](b('0x13'),b('0x9')),c[b('0xf')]('id',b('0x1a')),document[b('0xa')](b('0x24'))[0x0][b('0xe')](c),d=c[b('0x1')]('2d');for(var e=new FloatingList(),f=0x0;f<floating_quantity;f++){var g,h,j,k,l,m,n;h=getRandom('x'),j=getRandom('y'),l=getRandom('r'),k=getRandom('s'),m=getRandom(b('0x20')),n=getRandom(b('0x11')),randomFnR=getRandom('fnr'),(g=new Floating(h,j,k,l,{'x':m,'y':n,'r':randomFnR}))['draw'](d),e[b('0xb')](g);}stop=requestAnimationFrame(function(){d['clearRect'](0x0,0x0,c['width'],c['height']),e[b('0x17')](),e['draw'](d),stop=requestAnimationFrame(arguments['callee']);});}function stopp(){if(staticx){var c=document[b('0x2')]('canvas_floating');c[b('0xd')][b('0xc')](c),window[b('0x21')](stop),staticx=!0x1;}else startFloating();}img['src']=img_base64,Floating[b('0x6')][b('0x5')]=function(c){c[b('0x8')]();var d=0x28*this['s']/0x4;c[b('0x1d')](this['x'],this['y']),c[b('0x10')](this['r']),c['drawImage'](img,0x0,0x0,0x28*this['s'],0x28*this['s']),c['restore']();},Floating[b('0x6')][b('0x17')]=function(){this['x']=this['fn']['x'](this['x'],this['y']),this['y']=this['fn']['y'](this['y'],this['y']),this['r']=this['fn']['r'](this['r']),(this['x']>window[b('0x1b')]||this['x']<0x0||this['y']>window[b('0x15')]||this['y']<0x0)&&(this['r']=getRandom(b('0x19')),Math[b('0x1c')]()>0.4?(this['x']=getRandom('x'),this['y']=0x0,this['s']=getRandom('s'),this['r']=getRandom('r')):(this['x']=window[b('0x1b')],this['y']=getRandom('y'),this['s']=getRandom('s'),this['r']=getRandom('r')));},FloatingList=function(){this[b('0x23')]=[];},FloatingList['prototype'][b('0xb')]=function(c){this[b('0x23')][b('0xb')](c);},FloatingList[b('0x6')][b('0x17')]=function(){for(var c=0x0,d=this[b('0x23')][b('0x22')];c<d;c++)this['list'][c][b('0x17')]();},FloatingList[b('0x6')][b('0x5')]=function(c){for(var d=0x0,e=this[b('0x23')][b('0x22')];d<e;d++)this[b('0x23')][d]['draw'](c);},FloatingList[b('0x6')]['get']=function(c){return this[b('0x23')][c];},FloatingList[b('0x6')][b('0x1e')]=function(){return this[b('0x23')][b('0x22')];},window['onresize']=function(){var c=document[b('0x2')](b('0x3'));},img[b('0x16')]=function(){startFloating();};
参数设定

在这里插入图片描述

注:数量可以自行根据实际情况调整到自己满意,如果大小不合适就重新调整图片大小再转 base64 重新做即可。

使用

以上 JS 脚本保存好后在页面内引用即可,一般在 footer.php 引入:

<script type="text/javascript" src="floating.js"></script>

如果需要,提供两个可以直接使用的漂浮滑稽:

// 漂浮数量 40
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/fz6m/Private-web@1.9/js/floating/huaji.js"></script>
// 漂浮数量 20 (减半)
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/fz6m/Private-web@1.9/js/floating/huaji-half.js"></script>

效果

在这里插入图片描述

  • 6
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值