هذا هو تطبيق شريط التقدم الذي يعتمد على HTML5 وJavaScript. يعد هذا البرنامج الإضافي لشريط التقدم فريدًا جدًا، فهو يعرض تأثيرات الرسوم المتحركة للجسيمات عند عرض التقدم، وهذا يعني أن شريط التقدم سيولد بعض الجزيئات الصغيرة أثناء الانزلاق. التأثير رائع جدًا. ميزة أخرى هي أنه مع تغير التقدم، سيتغير لون شريط التقدم أيضًا.
كود جافا سكريبت
/*============================================================================== ========*/ /* محمل خفيف/*========================= ====================== function(c, cw, ch){ var _this = this.c = this.ctx = c.getContext('2d'); this.cw = cw; this.ch = ch; this.loader = 0; this.loaderHeight = 10; this.loader = { x: (this.cw /2 ) - (this.loaderWidth/2), y: (this.ch/2) - (this.loaderHeight/2) }; this.particles = []; this.particleLift = 180; this.hueStart = 0 this.hueEnd = 120; this.gravity = .15; ==================================================* * تهيئة /*============================================================================== ========*/ this.init = function(){ this.loop() }; == ====================*/ /* الوظائف المساعدة /*============================================================================== ========*/ this.rand = function(rMi, rMa){return ~~((Math.random()*(rMa-rMi+1))+rMi);}; this.hitTest = وظيفة (x1، y1، w1، h1، x2، y2، w2، h2) {العودة !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);}; /*======== ======================================*/ /* محمل التحديث /*== ================================================================================================== ====*/ this.updateLoader = function(){ if(this.loaded < 100){ this.loaded += this.loaderSpeed } else { this.loaded = 0 } }; ==================================================*/ محمل العرض /*============================================================================== ========*/ this.renderLoader = function(){ this.ctx.fillStyle = '#000'; this.ctx.fillRect(this.loader.x, this.loader.y, this.loaderWidth) , this.loaderHeight); this.hue = this.hueStart + (this.loaded/100)*(this.hueEnd - this.hueStart); var newWidth = (this.loaded/100)*this.loaderWidth; this.ctx.fillStyle = 'hsla('+this.hue+', 100 %, 40%, 1)'; this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight); this.ctx.fillStyle = '#222'; this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight/2); ================================================================================================== =====*/ /* الجسيمات /*============================================================================== ========*/ this.Particle = function(){ this.x = _this.loader.x + ((_this.loaded/100)*_this.loaderWidth) - _this.rand(0, 1) ; this.y = _this.ch/2 + _this.rand(0,_this.loaderHeight)-_this.loaderHeight/2; this.vx = (_this.rand(0,4)-2)/100; )-_this.particleLift*2)/100; this.width = _this.rand(1,4)/2; _this.rand(1,4)/2; this.hue = _this.hue }; this.Particle.prototype.update = function(i){ this.vx += (_this.rand(0,6)-3 )/100; this.vy += _this.gravity; this.x += this.vx; _this.particles.splice(i, 1); } }; this.Particle.prototype.render = function(){ _this.ctx.fillStyle = 'hsla('+this.hue+', 100%, '+_this.rand (50,70)+'%, '+_this.rand(20,100)/100+')'; _this.ctx.fillRect(this.x, this.y, this.width, this.height); this.createParticles = function(){ var i = this.particleRate; while(i--){ this.particles .push(new this.Particle()); } }; this.updateParticles = function(){ var i = this.particles.length; while(i--){ var p = this.particles[i]; p.update(i }; this.renderParticles = function(){ var i = this.particles.length; ){ var p = this.particles[i]; /*============================================================================== ========*/ /* قماش شفاف /*============================= =======================*/ this.clearCanvas = function(){ this.ctx.globalCompositeOperation = 'source-over'; this.ctx.clearRect(0,0,this.cw,this.ch); this.ctx.globalCompositeOperation = 'lighter' }; ========================*/ /* حلقة الرسوم المتحركة /*=== ================================================================================================== ===*/ this.loop = function(){ var LoopIt = function(){ requestAnimationFrame(loopIt, _this.clearCanvas(); _this.createParticles(); _this.updateParticles(); _this.renderParticles(); };};/*================================================================================== == ==================================================*/ /* === =====================*/var isCanvasSupported = function(){ var elem = document.createElement('canvas') إرجاع!(elem.getContext && elem.getContext('2d'));};/*============================= == =====================*/ /* طلب الإعداد AnimationFrame/*=============== == ====================*/var setupRAF = function(){ var lastTime = 0; بائعو فار = ['ms'، 'moz', 'webkit', 'o']; for(var x = 0; x < brands.length && !window.requestAnimationFrame; ++x){ window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame' ]; window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'] }; if(!window.requestAnimationFrame){ window.requestAnimationFrame = function(callback, element){ var currTime = new Date().getTime(); max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); *======================================================================================================== = =======*/ /* تعريف اللوحة القماشية والتهيئة / *=============================================================================== == ==========*/if(isCanvasSupported){ var c = document.createElement('canvas'); var ch = c.height; document.body.appendChild(c); var cl = new lightLoader(c, cw, ch);ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.