脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery实现加载进度条提示效果

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

 更新时间：2015年11月23日 10:41:35   作者：xiao-jian  
这篇文章主要介绍了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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • jQuery性能优化的38个建议

    jQuery性能优化的38个建议

    想必大家对于jQuery这个最流行的javascript类库都不陌生，而且只要是前端开发人员肯定或多或少的使用或者接触过，在这篇文章中，参考了一些资料及实际使用效率，将介绍一些书写高质量jQuery代码的原则，不单单会告诉你如何去书写，也会告诉你为什么这样书写，希望大家会觉得有所帮助
    2014-03-03
  • JQuery的一些小应用收集

    JQuery的一些小应用收集

    JQuery框架没有的可以在网上Down。
    2010-03-03
  • jQuery插件jqGrid动态获取列和列字段的方法

    jQuery插件jqGrid动态获取列和列字段的方法

    这篇文章主要介绍了jQuery插件jqGrid动态获取列和列字段的方法,结合实例形式分析了表格插件jqGrid针对表格字段属性相关操作技巧,需要的朋友可以参考下
    2017-03-03
  • JQ获取动态加载的图片大小的正确方法分享

    JQ获取动态加载的图片大小的正确方法分享

    这篇文章介绍了JQ获取动态加载的图片大小的正确方法，有需要的朋友可以参考一下
    2013-11-11
  • 基于jQuery的select下拉框选择触发事件实例分析

    基于jQuery的select下拉框选择触发事件实例分析

    这篇文章主要介绍了基于jQuery的select下拉框选择触发事件实现方法,结合实例形式分析了常用浏览器对select触发事件的兼容及实现触发的相关技巧,需要的朋友可以参考下
    2016-11-11
  • jquery 事件冒泡的介绍以及如何阻止事件冒泡

    jquery 事件冒泡的介绍以及如何阻止事件冒泡

    在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理,挺起来感觉这么不可思议，接下来为大家解除疑惑
    2012-12-12
  • jQuery解析json格式数据示例

    jQuery解析json格式数据示例

    这篇文章主要介绍了jQuery解析json格式数据,涉及jQuery针对json格式数据元素遍历相关操作技巧,需要的朋友可以参考下
    2018-09-09
  • JQuery中关于jquery.js与jquery.min.js的比较探讨

    JQuery中关于jquery.js与jquery.min.js的比较探讨

    jquery-1.4.2.min.js是优化的，而query-1.4.2.js是易于开发着阅读的，具体详解祥看本文，希望对你有所帮助
    2013-05-05
  • jQuery+css3实现转动的正方形效果(附demo源码下载)

    jQuery+css3实现转动的正方形效果(附demo源码下载)

    这篇文章主要介绍了jQuery+css3实现转动的正方形效果,可实现图片组集体转动的功能,通过jQuery结合时间函数定时操作css3属性实现旋转效果,并附带demo源码供读者下载,需要的朋友可以参考下
    2016-01-01
  • jQuery获取节点和子节点文本的方法

    jQuery获取节点和子节点文本的方法

    本节主要介绍了jQuery如何获取节点和子节点文本，下面有个示例，大家可以参考下
    2014-07-07

最新评论