首页>>Jquery文字>>loading测试效果(2018-08-13)

loading测试效果

loading测试效果
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="div-btn">  
  2.     <div class="dw-btn btn-success" onClick="loading1()">默认效果</div>  
  3.     <div class="dw-btn btn-warning" onClick="loading8()">纵向文字颜色</div>  
  4.     <div class="dw-btn btn-primary" onClick="loading2()">纵向效果无title</div>  
  5.     <div class="dw-btn btn-danger" onClick="loading3()">纵向效果无title描述</div>  
  6.     <div class="dw-btn btn-warning " onClick="loading4()">其他背景色</div>  
  7.     <div class="dw-btn btn-success" onClick="loading5()">纵向图片效果</div>  
  8.     <div class="dw-btn btn-primary" onClick="loading6()">横向图片效果</div>  
  9.     <div class="dw-btn btn-danger" onClick="loading7()">横向进度效果,字体颜色</div>  
  10.     <div class="dw-btn btn-warning" onClick="loading10()">无过渡效果</div>  
  11. </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2. function loading1() {  
  3.     $('body').loading({  
  4.         loadingWidth:240,  
  5.         title:'请稍等!',  
  6.         name:'test',  
  7.         discription:'描述描述描述描述',  
  8.         direction:'column',  
  9.         type:'origin',  
  10.         // originBg:'#71EA71',  
  11.         originDivWidth:40,  
  12.         originDivHeight:40,  
  13.         originWidth:6,  
  14.         originHeight:6,  
  15.         smallLoading:false,  
  16.         loadingMaskBg:'rgba(0,0,0,0.2)'  
  17.     });  
  18.   
  19.     setTimeout(function(){  
  20.         removeLoading('test');  
  21.     },3000);  
  22. }  
  23.   
  24. function loading2() {  
  25.     $('body').loading({  
  26.         loadingWidth:240,  
  27.         title:'',  
  28.         name:'test',  
  29.         discription:'描述描述描述描述',  
  30.         direction:'column',  
  31.         type:'origin',  
  32.         // originBg:'#71EA71',  
  33.         originDivWidth:40,  
  34.         originDivHeight:40,  
  35.         originWidth:6,  
  36.         originHeight:6,  
  37.         smallLoading:false,  
  38.         loadingMaskBg:'rgba(0,0,0,0.2)'  
  39.     });  
  40.   
  41.     setTimeout(function(){  
  42.         removeLoading('test');  
  43.     },3000);  
  44. }  
  45.   
  46. function loading3() {  
  47.     $('body').loading({  
  48.         loadingWidth:120,  
  49.         title:'',  
  50.         name:'test',  
  51.         discription:'',  
  52.         direction:'column',  
  53.         type:'origin',  
  54.         // originBg:'#71EA71',  
  55.         originDivWidth:40,  
  56.         originDivHeight:40,  
  57.         originWidth:6,  
  58.         originHeight:6,  
  59.         smallLoading:false,  
  60.         loadingMaskBg:'rgba(0,0,0,0.2)'  
  61.     });  
  62.   
  63.     setTimeout(function(){  
  64.         removeLoading('test');  
  65.     },3000);  
  66. }  
  67.   
  68. function loading4() {  
  69.     $('body').loading({  
  70.         loadingWidth:240,  
  71.         title:'请稍等!',  
  72.         name:'test',  
  73.         discription:'这是一个描述...',  
  74.         direction:'column',  
  75.         type:'origin',  
  76.         originBg:'#71EA71',  
  77.         originDivWidth:40,  
  78.         originDivHeight:40,  
  79.         originWidth:6,  
  80.         originHeight:6,  
  81.         smallLoading:false,  
  82.         loadingBg:'#389A81',  
  83.         loadingMaskBg:'rgba(123,122,222,0.2)'  
  84.     });  
  85.   
  86.     setTimeout(function(){  
  87.         removeLoading('test');  
  88.     },3000);  
  89. }  
  90.   
  91. function loading5() {  
  92.     $('body').loading({  
  93.         loadingWidth:240,  
  94.         title:'请稍等!',  
  95.         name:'test',  
  96.         discription:'这是一个描述...',  
  97.         direction:'column',  
  98.         type:'pic',  
  99.         originBg:'#71EA71',  
  100.         originDivWidth:60,  
  101.         originDivHeight:60,  
  102.         originWidth:6,  
  103.         originHeight:6,  
  104.         smallLoading:false,  
  105.         loadingBg:'#389A81',  
  106.         loadingMaskBg:'rgba(123,122,222,0.2)'  
  107.     });  
  108.   
  109.     setTimeout(function(){  
  110.         removeLoading('test');  
  111.     },3000);  
  112. }  
  113.   
  114. function loading6() {  
  115.     $('body').loading({  
  116.         loadingWidth:240,  
  117.         title:'请稍等!',  
  118.         name:'test',  
  119.         discription:'这是一个描述...',  
  120.         direction:'row',  
  121.         type:'pic',  
  122.         originBg:'#71EA71',  
  123.         originDivWidth:60,  
  124.         originDivHeight:60,  
  125.         originWidth:6,  
  126.         originHeight:6,  
  127.         smallLoading:false,  
  128.         loadingBg:'rgba(20,125,148,0.8)',  
  129.         loadingMaskBg:'rgba(123,122,222,0.2)'  
  130.     });  
  131.   
  132.     setTimeout(function(){  
  133.         removeLoading('test');  
  134.     },3000);  
  135. }  
  136.   
  137. function loading7() {  
  138.     $('body').loading({  
  139.         loadingWidth:240,  
  140.         title:'请稍等!',  
  141.         name:'test',  
  142.         discription:'这是一个描述...',  
  143.         direction:'row',  
  144.         type:'origin',  
  145.         originBg:'#71EA71',  
  146.         originDivWidth:30,  
  147.         originDivHeight:30,  
  148.         originWidth:4,  
  149.         originHeight:4,  
  150.         smallLoading:false,  
  151.         titleColor:'#388E7A',  
  152.         loadingBg:'#312923',  
  153.         loadingMaskBg:'rgba(22,22,22,0.2)'  
  154.     });  
  155.   
  156.     setTimeout(function(){  
  157.         removeLoading('test');  
  158.     },3000);  
  159. }  
  160.   
  161. function loading8(){  
  162.     $('body').loading({  
  163.         loadingWidth:220,  
  164.         title:'提示',  
  165.         name:'test',  
  166.         titleColor:'#fff',  
  167.         discColor:'#EDEEE9',  
  168.         discription:'颜色搭配,我不太懂',  
  169.         direction:'column',  
  170.         type:'origin',  
  171.         originBg:'#ECCFBB',  
  172.         originDivWidth:40,  
  173.         originDivHeight:40,  
  174.         originWidth:6,  
  175.         originHeight:6,  
  176.         smallLoading:false,  
  177.         loadingBg:'rgba(56,43,14,0.8)',  
  178.         loadingMaskBg:'rgba(66,66,66,0.2)'  
  179.     });  
  180.   
  181.     setTimeout(function(){  
  182.         removeLoading('test');  
  183.     },3000);  
  184. }  
  185.   
  186. function loading10(){  
  187.     $('body').loading({  
  188.         loadingWidth:240,  
  189.         title:'请稍等!',  
  190.         name:'test',  
  191.         animateIn:'none',  
  192.         discription:'这是一个描述...',  
  193.         direction:'row',  
  194.         type:'origin',  
  195.         mustRelative:true,  
  196.         originBg:'#71EA71',  
  197.         originDivWidth:30,  
  198.         originDivHeight:30,  
  199.         originWidth:4,  
  200.         originHeight:4,  
  201.         smallLoading:false,  
  202.         titleColor:'#388E7A',  
  203.         loadingBg:'#312923',  
  204.         loadingMaskBg:'rgba(22,22,22,0.2)'  
  205.     });  
  206.   
  207.     setTimeout(function(){  
  208.         removeLoading('test');  
  209.     },3000);  
  210. }  
  211. </script>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_670.html