最新消息:

jQuery加载动画

Web 观测者 3183浏览

Spin.js这款插件,可以灵活控制动画图片的长度、粗细、速度和角度,想要做成什么样都可以。效果如图所示(在线演示):

使用方法:
在JSP中引入spin.js:

<script type="text/javascript" src="spin.js"></script>

在需要弹出加载动画的地方添加如下代码:

var opts = {
 lines: 13, // The number of lines to draw
 length: 20, // The length of each line
 width: 10, // The line thickness
 radius: 30, // The radius of the inner circle
 corners: 1, // Corner roundness (0..1)
 rotate: 0, // The rotation offset
 direction: 1, // 1: clockwise, -1: counterclockwise
 color: '#000', // #rgb or #rrggbb or array of colors
 speed: 1, // Rounds per second
 trail: 60, // Afterglow percentage
 shadow: false, // Whether to render a shadow
 hwaccel: false, // Whether to use hardware acceleration
 className: 'spinner', // The CSS class to assign to the spinner
 zIndex: 2e9, // The z-index (defaults to 2000000000)
 top: '50%', // Top position relative to parent
 left: '50%' // Left position relative to parent
};
var target = document.getElementById('loading');
var spinner = new Spinner(opts).spin(target);  //开始加载
spinner.spin();  //停止加载

这款插件可以配合全屏透明遮罩来使用,效果就是弹出加载动画之后,主页面变灰,加载结束后,主页面恢复。使用方法:
在JSP页面中加入如下代码:

<div id="loading"></div>
<div id="pageOverlay" style="visibility:hidden;"></div>

第一个div中放的是Spin加载动画,第二个div即遮罩层。设置遮罩层CSS样式:

#pageOverlay { position:fixed; top:0; left:0; z-index:1987; width:100%; height:100%; background:#fff; filter:alpha(opacity=70); opacity:0.7; }

开启遮罩层:

document.getElementById('pageOverlay').style.visibility = 'visible';  //通常放在var spinner = new Spinner(opts).spin(target);之前

关闭遮罩层:

document.getElementById('pageOverlay').style.visibility = 'hidden';  //通常放在spinner.spin();之后

附注:
如果在JS中某一个函数需要执行一段时间,我们想在函数执行过程中出现加载动画,函数执行完毕结束加载动画。而直接使用如上代码可能导致函数执行完毕后加载动画才出现,达不到预想效果,这时候需要配合JS的setTimeout函数来使用。实例:

/*批准待办任务*/
function approveTask(taskId,processInstanceId){
   document.getElementById('pageOverlay').style.visibility = 'visible';
   var opts = {
           lines: 12, // The number of lines to draw
           length: 20, // The length of each line
           width: 10, // The line thickness
           radius: 30, // The radius of the inner circle
           corners: 1, // Corner roundness (0..1)
           rotate: 0, // The rotation offset
           direction: 1, // 1: clockwise, -1: counterclockwise
           color: '#000', // #rgb or #rrggbb or array of colors
           speed: 1, // Rounds per second
           trail: 60, // Afterglow percentage
           shadow: false, // Whether to render a shadow
           hwaccel: false, // Whether to use hardware acceleration
           className: 'spinner', // The CSS class to assign to the spinner
           zIndex: 2e9, // The z-index (defaults to 2000000000)
           top: '50%', // Top position relative to parent
           left: '50%' // Left position relative to parent
       };
   var target = document.getElementById('loading');
   var spinner = new Spinner(opts).spin(target);
   
   setTimeout(
   function(){
       var eiinfo = new EiInfo();
       eiinfo.set("taskId", taskId);
       eiinfo.set("processInstanceId", processInstanceId);
       EiCommunicator.send("FKRW0001", "approveTask", eiinfo, {
           onSuccess : function(outInfo) {
               EiCommunicator.send("FKXX0001", "sentMessage", eiinfo, null);  //发送消息
               loadTaskList();
               spinner.spin();
               document.getElementById('pageOverlay').style.visibility = 'hidden';
           },
           onFail : function(message) {
               alert(message);
           }
       });
   },1000);
}

转载请注明:观测者 » jQuery加载动画