A-A+

jquery fakeLoader.js创建页面加载动画例子

2016年01月11日 web前端设计 暂无评论 阅读 7 views 次

fakeLoader.js 是轻量级的 jQuery 插件,帮助你创建动态的全屏加载掩饰微调效果,模拟页面预加载的效果,下面我们就一起来看一个fakeLoader.js创建页面加载动画例子。

HTML

我们只需要在的第一行加入以下代码。

  1. <div id="fakeLoader"></div>  

CSS

然后在里载入css样式文件。

  1. <link rel="stylesheet" href="css/fakeLoader.css">  

JS

别忘了加载jQuery库文件以及fakeLoader.js。

  1. <script src="js/jquery.js"></script>   
  2. <script src="js/fakeLoader.min.js"></script>  

然后在的上一行加入以下代码:

  1. <script type="text/javascript">   
  2. $("#fakeloader").fakeLoader();   
  3. </script>  

以上代码就是调用了fakeLoader.js插件,该插件还提供了以下选项设置。

timeToHide:过渡加载动画时间,毫秒,默认1200。

spinner:动画效果,有7个值可选:'spinner1', 'spinner2', 'spinner3', 'spinner4', 'spinner5', 'spinner6', 'spinner7',默认值:spinner1。

bgColor:过渡遮罩层背景色,默认:"#2ecc71"。

imagePath:自定义过渡动画图片。

标签:

给我留言