【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>

效果

【Web】自定义网页漂浮物相关推荐

HTML期末大作业~web前端开发个人博客HTML整站模板~Web大学生网页成品 ~个人主页博客网页HTML设计制作...
HTML期末大作业~ 学生HTML个人网页作业作品下载个人主页博客网页设计制作大学生个人网站作业模板简单个人网页制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTM ...
网页漂浮物代码_无代码VS低代码。有什么不同？它。不。物。
网页漂浮物代码 You may hear the terms "No Code" and "Low Code" thrown around by develop ...
HTML期末大作业~web前端开发个人博客HTML整站模板~Web大学生网页成品 ~个人主页博客网页HTML设计制作
HTML期末大作业~ 学生HTML个人网页作业作品下载个人主页博客网页设计制作大学生个人网站作业模板简单个人网页制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTM ...
全栈 - 20 Web 基础网页的血肉 CSS
这是全栈数据工程师养成攻略系列教程的第二十期:20 Web基础网页的血肉CSS. HTML决定了网页中包含哪些内容,而CSS则决定了这些内容所呈现的样式. 什么是CSS CSS全拼是Cascadin ...
在ASP.NET MVC里对Web Page网页进行权限控制
我们在ASP.NET MVC开发时,有时候还是得设计ASP.NET的Web Page网页(.aspx和.aspx.cs),来实现一些ASP.NET MVC无法实现的功能,如此篇<Visual S ...
手机web——自适应网页设计（html/css控制） - 51CTO.COM
手机web--自适应网页设计(html/css控制) - 51CTO.COM 一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头 ...
拖拽元素自定义html模板,JS实现的自定义网页拖动类
本文实例讲述了JS实现的自定义网页拖动类.分享给大家供大家参考,具体如下: 先来看运行效果截图如下: 在线演示地址如下: 具体代码如下: /p> "http://www.w3.org/ ...
Web自定义表单工具和协同办公系统之集成（１）
提起"协同办公",随便在百度或者Google搜索一下,就能让你看到眼花缭乱的信息,国内的各大协同办公软件厂商都在鼓吹着自己对协同的理解和自己的协同办公软件产品如何能实现协同办公管理 ...
HTML5期末大作业：电影网站设计——电影资讯博客(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码
HTML5期末大作业:电影网站设计--电影资讯博客(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码常见网页设计作业 ...