澳门太阳娱乐集团官网-太阳集团太阳娱乐登录

澳门太阳娱乐集团官网jquery网页加载进度条的实
分类:服务器

正文实例陈述了jquery完毕加载进程条提醒效果代码。分享给我们供我们参谋。具体如下:运转效果截图如下:

本次重大介绍一下网页加载进程的完结。如下图,在页面加载的时候,上方青绿的进程条

loading 加载提醒 ······ 透明遮罩 居中

  进度条      

网页加载进程的益处是能力所能达到越来越好的反射当前网页的加载过程意况,loading进程条可用动漫的花样从伊始0%到100%完结网页加载那生机勃勃进程。不过当前的浏览器并不曾提供页面加载进度方面包车型客车接口,约等于说页面还无法正确重临页面实际加载的速度,本文中我们运用jQuery来得以达成页面加载进程条效果。

复制代码 代码如下: body{ margin: 0; font-size: 12px; line-height: 百分百; font-family: Arial, sans-serif; } .background { display: block; width: 100%; height: 百分之百; opacity: 0.4; filter: alpha; background:while; position: absolute; top: 0; left: 0; z-index: 2003; } .progressBar { border: solid 2px #86A5AD; background: white url no-repeat 10px 10px; } .progressBar { display: block; width: 148px; height: 28px; position: fixed; top: 50%; left: 50%; margin-left: -74px; margin-top: -14px; padding: 10px 10px 10px 50px; text-align: left; line-height: 27px; font-weight: bold; position: absolute; z-index: 2001; }

css样式:

首先我们要清楚的是,近日平昔不任何浏览器能够直接获取正在加载对象的抑扬顿挫。所以我们爱莫能助透过数据大小来贯彻0-100%的加载显示进度。

数据加载中,请稍等...

body,div { padding: 0; margin: 0;}div.spinner { position: absolute; width: 160px; height: 160px; margin-left: 240px; margin-top: 350px;}div.loaderdot { position: absolute; width: 20px; height: 20px; border-radius: 50%; background-color: rgb;} 1 window.onload = function() {

于是我们需求通过html代码逐行加载的特点,在整页代码的多少个跳跃行数中装置节点,实行大约的歪曲进程反馈来落到实处速度加载的效应。大致敬思是:页面每加载到钦定区域,则重返%的快慢结果,通过设置四个节点,来达到一步一步彰显加载进程的指标。

var ajaxbg = $("#background,#progressBar"); ajaxbg.hide.ajaxStart { ajaxbg.show.ajaxStop { ajaxbg.hide; 作者:曾祥展

js代码:

万意气风发有叁个页面,按区块分为页头、右侧内容、侧面侧栏、页脚四局地,大家把那四片段作为四个节点,当页面加载每二个节点后,设置大概加载百分比,页面布局如下:

var total = 16, angle = 3 * Math.PI, Radius = 80, html = ''; var spinnerL = parseInt.css; var spinnerT = parseInt.css; for (var i = 0; i < total; i++) { //对每个元素的位置和透明度进行初始化设置 var loaderL = Radius + Radius * Math.sin - 10; var loaderT = Radius + Radius * Math.cos - 10; html += ""; angle -= 2 * Math.PI / total; } $.empty; var lastLoaderdot = $.last(); timer = setInterval { $.each { var self = $; var prev = self.prev ? self.prev() : lastLoaderdot, opas = prev.css; self.animate({ opacity: opas }, 50); }); }, 60);27}
 页头部分   左侧内容   右边侧栏   页脚部分  

愿意本文所述对我们学习jquery程序设计有所支持。

接下来我们在下的率先行加上进度条.loading。

小编们要设置loading进程条的体制,设置背景象,中度,以至职位,优先级等。

.loading{ background:#FF6100; //设置进度条的颜色 height:5px; //设置进度条的高度 position:fixed; //设定进度条跟随屏幕滚动 top:0; //将进度条固定在页面顶部 z-index:99999 //提高进度条的优先层级,避免被其他层遮挡 } 

接下去,大家要在各种节点后边加上过程动漫,使用jQuery来落实。

 页头部分   $.animate; //&#31532;&#19968;&#20010;&#36827;&#24230;&#33410;&#28857;   左侧内容   $.animate; //&#31532;&#20108;&#20010;&#36827;&#24230;&#33410;&#28857;   右边侧栏   $.animate; //&#31532;&#19977;&#20010;&#36827;&#24230;&#33410;&#28857;   页脚部分   $.animate; //&#31532;&#22235;&#20010;&#36827;&#24230;&#33410;&#28857;  

可以看见,每加载四个节点后,jQuery调用animate(卡塔尔(قطر‎动漫方法完毕进程条宽度的变动,每种节点变化以50皮秒时间让进程条看起来更通畅些,最后从0%变化到100%,实现了进程条的快慢动漫。

当进程条达到百分之百后,页面加载成功,最后还可能有一步要做的就是东躲西藏进度条。

$.ready{ $; }); 

以上正是本文的全部内容,希望对我们的读书抱有助于,也期望大家多多指教脚本之家。

本文由澳门太阳娱乐集团官网发布于服务器,转载请注明出处:澳门太阳娱乐集团官网jquery网页加载进度条的实

上一篇:【澳门太阳娱乐集团官网】依赖jquery完结省市联 下一篇:Nodejs的express使用教程_node.js_脚本之家
猜你喜欢
热门排行
精彩图文