jquery实现加载进度条提示效果


Posted in Javascript onNovember 23, 2015

本文实例讲述了jquery实现加载进度条提示效果代码。分享给大家供大家参考。具体如下:
运行效果截图如下:

jquery实现加载进度条提示效果

具体代码如下:

<!DOCTYPE html>
<html>

 <head>
  <meta charset="utf-8">
  <title>进度条</title>
  <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.4.1/jquery.min.js"></script>
 </head>

 <body>
  <div class="spinner"> </div> 
 </body>

</html>

css样式:

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(29, 140, 248);
}  1 window.onload = function() {

js代码:

var total = 16,
   angle = 3 * Math.PI,
   Radius = 80,
   html = '';
  var spinnerL = parseInt($("div.spinner").css("margin-left"));
  var spinnerT = parseInt($("div.spinner").css("margin-top"));
  for (var i = 0; i < total; i++) {
   //对每个元素的位置和透明度进行初始化设置
   var loaderL = Radius + Radius * Math.sin(angle) - 10;
   var loaderT = Radius + Radius * Math.cos(angle) - 10;
   html += "<div class='loaderdot' style='left:" + loaderL + "px;top:" + loaderT + "px; opacity:" + i / (total - 1) + "'></div>";
   angle -= 2 * Math.PI / total;
 }
 $("div.spinner").empty().html(html);
 var lastLoaderdot = $("div.loaderdot").last();
 timer = setInterval(function() {
   $("div.loaderdot").each(function() {
   var self = $(this);
   
 var prev = self.prev().get(0) ? self.prev() : lastLoaderdot,
    
 opas = prev.css("opacity");
   
 self.animate({
    
opacity: opas
   
}, 50);
   });
 }, 60);
27}

希望本文所述对大家学习jquery程序设计有所帮助。

Javascript 相关文章推荐
兼容多浏览器的字幕特效Marquee的通用js类
Jul 20 Javascript
发一个自己用JS写的实用看图工具实现代码
Jul 26 Javascript
JQuery 学习笔记 选择器之一
Jul 23 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
JS烟花背景效果实现方法
Mar 03 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
Javascript中级语法快速入手
Jul 30 Javascript
Vue-Router实现页面正在加载特效方法示例
Feb 12 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
Sep 13 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 #Javascript
javascript实现uploadify上传格式以及个数限制
Nov 23 #Javascript
Jquery 效果使用详解
Nov 23 #Javascript
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 #Javascript
jQuery实现简洁的导航菜单效果
Nov 23 #Javascript
Bootstrap每天必学之表格
Nov 23 #Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 #Javascript
You might like
php 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
php动态绑定变量的用法
2015/06/16 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
javascript时间函数大全
2014/06/30 Javascript
jQuery中:header选择器用法实例
2014/12/29 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
jQuery消息提示框插件Tipso
2015/05/04 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
JavaScript输出所选择起始与结束日期的方法
2017/07/12 Javascript
深入浅析javascript继承体系
2017/10/23 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
laydate如何根据开始时间或者结束时间限制范围
2018/11/15 Javascript
react-router 路由切换动画的实现示例
2018/12/03 Javascript
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
python 寻找优化使成本函数最小的最优解的方法
2017/12/28 Python
Python处理文本换行符实例代码
2018/02/03 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
Python numpy.array()生成相同元素数组的示例
2018/11/12 Python
Python常见的pandas用法demo示例
2019/03/16 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
英国著名药妆店:Superdrug
2021/02/13 全球购物
写给女朋友的道歉信
2014/01/08 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
预备党员群众意见
2015/06/01 职场文书
学校教学管理制度
2015/08/06 职场文书
《葡萄沟》教学反思
2016/02/23 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python
golang中字符串MD5生成方式总结
2021/07/04 Golang