效果:

CoreThink开发(十三)增加页面加载动画

加载动画是由jquery和fakeloader这个js库实现的。

其实这个也可以做成一个插件,用数据库记录是否开启,选择动画的样式,那样扩展性会更好.

源码资源已经上传在我的csdn下载中。
http://download.csdn.net/detail/u012995856/9602642

这个独立性很好,除了引入css文件和js文件,其余的操作就是在页面加一个div层一步就OK了.

1.把资源文件放入Corethink库目录中
在Public/libs目录下新建fakeloader/js、fakeloader/css目录,把资源文件拷贝到对应的目录

2.在Home/View/Public/layout.html中引入fakeloader的js和css

<link rel="stylesheet" href="__PUBLIC__/libs/fakeloader/css/fakeloader.css">
<script src="__PUBLIC__/libs/fakeloader/js/fakeloader.min.js"></script>
<script>
    $(document).ready(function(){
        $(".fakeloader").fakeLoader({
            timeToHide:1200,
            bgColor:"#3498db",
            spinner:"spinner3"
        });
    });
</script>

  

此处的layout之前已经引入了jquery库
注意js代码会依赖jquery,一定要出现在jquery的下面

3.增加显示加载动画的div
我是加在了

</body>

  的前边了

<div class="fakeloader"></div>

  这样就OK了.

相关文章:

  • 2021-11-29
  • 2022-12-23
  • 2021-11-29
  • 2022-02-19
  • 2022-02-16
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-09-04
  • 2021-11-29
  • 2021-11-29
  • 2021-11-29
  • 2021-11-29
  • 2021-11-29
  • 2021-11-29
相关资源
相似解决方案