HTML5制作Loading加载效果代码,Css代码库,德仔网

代码语言

代码分类

【Css】 HTML5制作Loading加载效果

作者:亭子happy / 发布于2012/8/21/ 706

<div><!doctype html> 
 <html> 
 <head> 
 <meta http-equiv="content-type" content="GBK"/> 
 <title>loading</title> 
 <script type="text/javascript"> 
 /* 
 html5 loading 控件 
<a href="http://www.iiwnet.com">www.iiwnet.com</a> PHP教程网
 发布或使用此控件,请保留作者声明 
 */ 
 function loading(canvas,options){ 
 this.canvas = canvas; 
 if(options){ 
 this.radius = options.radius||12; 
 this.circleLineWidth = options.circleLineWidth||4; 
 this.circleColor = options.circleColor||'lightgray'; 
 this.dotColor = options.dotColor||'gray'; 
 }else{ 
 this.radius = 12; 
 this.circelLineWidth = 4; 
 this.circleColor = 'lightgray'; 
 this.dotColor = 'gray'; 
 } 
 } 
 loading.prototype = { 
 show:function (){ 
 var canvas = this.canvas; 
 if(!canvas.getContext)return; 
 if(canvas.__loading)return; 
 canvas.__loading = this; 
 var ctx = canvas.getContext('2d'); 
 var radius = this.radius; 
 var rotators = [{angle:0,radius:1.5},{angle:3/radius,radius:2},{angle:7/radius,radius:2.5},{angle:12/radius,radius:3}]; 
 var me = this; 
 canvas.loadingInterval = setInterval(function(){ 
 ctx.clearRect(0,0,canvas.width,canvas.height); 
 var lineWidth = me.circleLineWidth; 
 var center = {x:canvas.width/2 - radius,y:canvas.height/2-radius}; 
 ctx.beginPath(); 
 ctx.lineWidth = lineWidth; 
 ctx.strokeStyle = me.circleColor; 
 ctx.arc(center.x,center.y,radius,0,Math.PI*2); 
 ctx.closePath(); 
 ctx.stroke(); 
 for(var i=0;i<rotators.length;i++){ 
 var rotatorAngle = rotators[i].currentAngle||rotators[i].angle; 
 //在圆圈上面画小圆 
 var rotatorCenter = {x:center.x-(radius)*Math.cos(rotatorAngle) ,y:center.y-(radius)*Math.sin(rotatorAngle)}; 
 var rotatorRadius = rotators[i].radius; 
 ctx.beginPath(); 
 ctx.fillStyle = me.dotColor; 
 ctx.arc(rotatorCenter.x,rotatorCenter.y,rotatorRadius,0,Math.PI*2); 
 ctx.closePath(); 
 ctx.fill(); 
 rotators[i].currentAngle = rotatorAngle+4/radius; 
 } 
 },50); 
 }, 
 hide:function(){ 
 var canvas = this.canvas; 
 canvas.__loading = false; 
 if(canvas.loadingInterval){ 
 window.clearInterval(canvas.loadingInterval); 
 } 
 var ctx = canvas.getContext('2d'); 
 if(ctx)ctx.clearRect(0,0,canvas.width,canvas.height); 
 } 
 }; 
 </script> 
 </head> 
 <body> 
 <canvas id="canvas" width="300" height="100" style="border:1px solid #69c"></canvas> 
  
 <input type="button" onclick="loadingObj.hide()" value="HideLoading"/> 
 <input type="button" onclick="loadingObj.show()" value="showLoading"/> 
  
 <script> 
 var loadingObj = new loading(document.getElementById('canvas'),{radius:8,circleLineWidth:3}); 
 loadingObj.show(); 
 </script> 
 </body> 
 </html></div>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　Loading加载效果　

同语言下

可能有用的

亭子happy贡献的其它代码(3)