话说前两天,我不是琢磨着给我的网站加点料嘛就想弄个好看点的加载按钮。你知道的,现在大家上网都讲究个丝滑体验,加载慢谁还愿意等,所以我就开始四处扒拉。
我也没啥头绪,就在网上瞎搜,什么“好看的加载按钮”、“炫酷的 loading 效果”之类的,结果出来的都是些花里胡哨的,要么太复杂,要么跟我网站的风格不搭。
后来我就想着,要不自己动手试试?但转念一想,我这水平,从零开始写个这玩意儿,那得猴年马月去。于是我就把目标转向找现成的“轮子”。
找来找去,还真让我给找到一个叫 Loda-Button 的东西。看介绍,说是基于 jQuery 的,用起来应该不难。而且我看它那几个演示效果,还挺简洁大方的,正合我意。
我赶紧把它扒拉下来,打开它的那个 HTML 文件,里头就是一些简单的 HTML 结构和 CSS 样式,然后引入一个 jQuery 文件和一个 Loda-Button 的 JS 文件。我一看,这结构,我熟!
安装过程:
- 先整一个按钮,给它一个 ID,比如就叫
myButton。 - 然后引入 jQuery 和 Loda-Button 的 JS 文件。
- 写一小段 JS 代码,把这个按钮给“激活”一下:
$('#myButton').lodaButton();
就这么简单,搞定!
然后,我就开始尝试给按钮加各种效果。Loda-Button 提供好几种加载动画,什么转圈圈的、跳动的小点的、还有那种进度条式的,我都试个遍。
我还发现,这玩意儿可以自定义颜色、大小、速度啥的,这就很灵活嘛我可以根据自己网站的风格,把按钮调成我想要的样子。
我还试试它的那个回调函数的功能。啥意思?就是说,你可以在加载开始和结束的时候,让它执行一些你自己的代码。比如,加载开始的时候,弹出一个提示框;加载结束的时候,把提示框关掉。
折腾一番,我算是把 Loda-Button 给玩明白。这玩意儿,确实挺好用的,简单、方便、效果还不错。关键是,它让我的网站看起来更“高级”,哈哈!
总结一下
如果你也想给自己的网站加个好看的加载按钮,又不想费太多事,那 Loda-Button 绝对是个不错的选择。去网上搜一下,很容易就能找到。
