zoukankan      html  css  js  c++  java
  • loading插件(原创)

      前言:服务器这几天都连不上,所以迟迟未更新,今天连上后才把插件文件和文档上传了。良心之作啊,难度虽不高,但命名多文件多啊。我得马上写篇博客絮叨一下,直接上地址。

      文档及下载地址:www.chengguanhui.com/demos/loading-js/

      1、简介

        loading.js是本人近日开发的一款小插件,它主要是用于对图片进行预加载和展示多达28种的CSS3加载特效,非常小巧方便。这28个特效是网上收集回来的,为了在做小游戏或者写页面的时候使用更方便,我就把它做成了JS版本了。想要引入效果以及加载图片,现在一行代码就可以实现了。当然,这款插件很小,尚存在很多不足的地方,而且目前只支持较新的浏览器。但是千里之行,始于足下。我相信我正式工作以后会产出更多的好作品以及好博客的,望多多支持多多鼓励啊。

      2、源码解释

        首先创建loading对象以及存储28种特效类型的子div数量,后面就可以根据这组数据创建相应的结构了。

     1 var loading = loading || {};
     2 var types = {
     3         "ball-pulse":3,
     4         "ball-grid-pulse":9,
     5         "ball-clip-rotate":1,
     6         "ball-clip-rotate-pulse":2,
     7         "square-spin":1,
     8         "ball-clip-rotate-multiple":2,
     9         "ball-pulse-rise":5,
    10         "ball-rotate":1,
    11         "cube-transition":2,
    12         "ball-zig-zag":2,
    13         "ball-zig-zag-deflect":2,
    14         "ball-triangle-path":3,
    15         "ball-scale":1,
    16         "line-scale":5,
    17         "line-scale-party":4,
    18         "ball-scale-multiple":3,
    19         "ball-pulse-sync":3,
    20         "ball-beat":3,
    21         "line-scale-pulse-out":5,
    22         "line-scale-pulse-out-rapid":5,
    23         "ball-scale-ripple":1,
    24         "ball-scale-ripple-multiple":3,
    25         "ball-spin-fade-loader":8,
    26         "line-spin-fade-loader":8,
    27         "triangle-skew-spin":1,
    28         "pacman":5,
    29         "ball-grid-beat":9,
    30         "semi-circle-spin":1
    31 };

        以下就是整个插件函数的结构,赋了一些初值。

     1   var small = "15px";
     2   var normal = "25px";
     3   var big = "40px";
     4 (function(loading) {
     5     var loaders = '<div class="loader"><div class="loader-inner ball-pulse"><div></div><div></div><div></div></div></div>';
     6     //初始化动画
     7     function _init () {        
     8         ……
     9     }
    10     //预加载图片
    11     function loadingFn(imgs,cbFn) {
    12         ……
    13     }
    14     //绑定
    15     loading.init = _init;
    16 
    17 })(loading)    

        loading的_init()方法有序执行以下代码:

        (1)此方法有三个参数,第一个必填,二三选填。当只有两个参数时,需要判断第二参数是设置项对象,还是回调函数。

    1      var obj = arguments[0];
    2         var ops = arguments[1];
    3         var cbFn = null;
    4         //第二参数为空则将其置为回调函数
    5         if(typeof(ops)=="function"){
    6             cbFn = ops;
    7         }else if(arguments.length==3){
    8             cbFn = arguments[2];
    9         }

        (2)由于实参1中设置的数量是不定的,所以将用户设置的值拷贝到ops2后再返回ops。有设置的值将被覆盖,没设置的启用预设值。

     1         var ops2={
     2             size:"",
     3             fullscreen:false,
     4             type:"ball-pulse",
     5             color:"",
     6             bgColor:"#ed5565",
     7             imgs:[]
     8         };
     9         //将ops中设置的值赋ops2
    10         for (var key in ops) {
    11             ops2[key] = ops[key];
    12         };
    13         //重设
    14         ops = ops2;        

        (3)根据第一参数获取元素,让用户可以写id名或直接写元素节点变量。接着判断用户设置的类型,如果不等于预设值则到types中调用数据,创建相应数量的div。然后拼接动画结构的div字符串以及将设置的type(即class名)赋给相应的div。

     1       //获取ID    
     2         var target = document.getElementById(obj);
     3         if(target==null || !target){//容错
     4             target = obj;
     5         }
     6         //非默认类型
     7         if(ops.type!="ball-pulse"){
     8             var length = types[ops.type];
     9             var str = "";
    10             for(var i=0;i<length;i++){
    11                 str+="<div></div>";
    12             }
    13             str = '<div class="loader"><div class="loader-inner ' + ops.type + '">'+ str + "</div></div>";
    14             loaders = str;
    15         }    

        (4)如果设置为全屏模式,则给body新建一个子div,设置大小为全屏并定位到最前方。这时候target不再是用户给定id的元素,而是新建的div,最后再插入到target。

     1       //全屏模式
     2         if(ops.fullscreen){
     3             var loadWrap = document.createElement("div");
     4             loadWrap.style.position = "absolute";
     5             loadWrap.style.width = "100%";
     6             loadWrap.style.height = "100%";
     7             loadWrap.style.left = 0;
     8             loadWrap.style.top = 0;
     9             loadWrap.style.zIndex = 10000;
    10             document.body.appendChild(loadWrap);
    11             target = loadWrap;
    12         }
    13         //插入
    14         target.innerHTML = loaders;        

        (5)如果用户设置了参数则修改相应的样式,如颜色、大小和背景。包裹动画的容器是默认居中的。

     1       //颜色和大小
     2         var loader = target.children[0];
     3         var divs = loader.children[0].getElementsByTagName("div");
     4         for(var j=0;j<divs.length;j++){
     5             if(ops.color!=""||ops.color.length!=0){
     6                 divs[j].style.backgroundColor = ops.color;
     7             }        
     8             if(ops.size.length!=0){
     9                 divs[j].style.width = ops.size;
    10                 divs[j].style.height = ops.size;
    11             }
    12         }
    13         //背景
    14         if(ops.bgColor!=""||ops.bgColor.length>=0){
    15             loader.style.backgroundColor = ops.bgColor;
    16         }
    17         //居中
    18         loader.style.position = "absolute";
    19         loader.style.top = "50%";
    20         loader.style.left = "50%";
    21         loader.style.marginLeft = -loader.offsetWidth/2 + "px";
    22         loader.style.marginTop = -loader.offsetHeight/2 + "px";    

        (6)如果用户定义了图片数组则调用加载图片的函数,否则获取本页的所有img的资源地址,并调用加载函数加载本页所有图片。

     1       //加载图片
     2         if (ops.imgs.length>0) {
     3             loadingFn(ops.imgs,cbFn); 
     4         }else{
     5             //若空则加载页面所有img
     6             var imgs = document.getElementsByTagName("img");
     7             var srcs = [];
     8             for(var i=0;i<imgs.length;i++){
     9                 srcs[i] = imgs[i].getAttribute("src");
    10             }
    11             loadingFn(srcs,cbFn);
    12         }                

        加载图片函数结构如下,参数1为图片数组,若空则直接执行回调函数;参数2为回调函数,存在时才执行。

     1     //预加载图片
     2     function loadingFn(imgs,cbFn) {
     3         var index = 0;
     4         //若页面没有img
     5         if(imgs.length==0){
     6             cbFn && cbFn();
     7             return;
     8         }
     9         for (var i = 0; i < imgs.length; i++) {
    10             var img = new Image();
    11             img.src = imgs[i];
    12             img.onload = function  () {
    13                 index++;
    14                 if (index == imgs.length) {
    15                     cbFn && cbFn();
    16                 };
    17             }
    18         };
    19     }    

       3、示例  

          (1)默认简单版  

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8" />
     5         <!--引入想要的动画-->
     6         <link rel="stylesheet" type="text/css" href="css/ball-pulse.css"/>    
     7         <title>loading插件</title>
     8     </head>
     9     <body>
    10         <!--指定动画容器-->
    11         <div id="wrap"></div>
    12     </body>
    13     <!--引入loading.js-->
    14     <script src="js/loading.js" type="text/javascript" charset="utf-8"></script>
    15     <script type="text/javascript">
    16     //一句搞定
    17         loading.init(wrap);
    18     </script>
    19 </html>

         (2)自定义完整版

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8" />
     5         <!--引入想要的动画-->
     6         <link rel="stylesheet" type="text/css" href="css/ball-pulse.css"/>    
     7         <title>loading插件</title>
     8     </head>
     9     <body>
    10         <!--指定动画容器-->
    11         <div id="wrap"></div>
    12     </body>
    13     <!--引入loading.js-->
    14     <script src="js/loading.js" type="text/javascript" charset="utf-8"></script>
    15     <script type="text/javascript">
    16         var wrap = document.getElementById("wrap");//可写可不写
    17         var imgArr = ["img/p1.jpg","img/p2.jpg"];//需要加载的图片,若空则默认加载本页面图片
    18         loading.init(wrap,{    //第一个参数写变量名或直接写"#wrap"均可
    19             size:normal,    //图形大小
    20             type:"ball-pulse",    //动画类型
    21             color:"#fff",        //图形颜色
    22             bgColor:"#ed5565",        //背景颜色
    23             imgs:imgArr            //加载图片数组
    24         },function  () {        //回调函数
    25 //            wrap.style.display = "none";
    26         })
    27     </script>
    28 </html>

      好吧不多说了,快去看效果啦!

      地址:www.chengguanhui.com/demos/loading-js/

      说明:原创文章,转载时请注明出处,谢谢。

  • 相关阅读:
    主席树学习笔记(静态区间第k大)
    p1156 题解(未完全解决)
    树上神奇 逆 逆序对(我的叫法)hh的小纸条 重中之重!!!!!
    二叉查找树学习笔记(BST)
    负环...坑点
    差分约束系统学习笔记
    tarjan学习(复习)笔记(持续更新)(各类找环模板)
    分层图食用简介
    js数组方法
    灵动标签调用父栏目下的所有文章
  • 原文地址:https://www.cnblogs.com/chengguanhui/p/4711190.html
Copyright © 2011-2022 走看看