jquery实现加载进度条提示效果
2015-11-23 00:00
726 查看
本文实例讲述了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实现省市联动效果
- jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
- jquery实现表单验证简单实例演示
- jquery自定义表格样式
- jquery实现图片放大镜功能
- jquery无限级联下拉菜单简单实例演示
- 基于jQuery实现简单的折叠菜单效果
- jQuery实现Tab选项卡切换效果简单演示
- jquery_raty
- 学习日记:jQuery之what,why,where,how及应用 (下)
- jQuery.validate失去焦点时执行验证
- jQuery.validate失去焦点时执行验证
- jquery实现动画特效
- jquery语法(3)事件
- jquery validate验证规则重用
- jQuery获取表单和的div中的值
- C#引用JQuery的步骤
- jQuery ZeroClipboard粘贴板
- 利用jquery的淡入淡出函数(fadeIn和fadeOut)--实现轮播
- 一般处理程序ashx 处理JQuery的Ajax()请求