zoukankan      html  css  js  c++  java
  • 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了.

  • 相关阅读:
    NYOJ458
    NYOJ67
    NYOJ105
    NYOJ1071
    NYOJ463
    C语言练字用小软件 — Practise_Calligraphy_1.0(ANSI)
    NYOJ276
    NYOJ455
    NYOJ74
    Jzoj4458 密钥破解——Pollard-rho
  • 原文地址:https://www.cnblogs.com/mracale/p/8086104.html
Copyright © 2011-2022 走看看