用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>
body,div {
padding:;
margin:;
}
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);
} window.onload = function() {
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);
}
运行结果:http://landingpage.hdtmedia.com//learning/20150612/loading.html
用jquery制作加载条的更多相关文章
- 一款基于jquery带百分比的响应式进度加载条
今天要给大家带来一款基于jquery带百分比的响应式进度加载条.这款加载条非常漂亮,而且带有进度的百度比,且在不同的百分比用的是不同的颜色.而且这款加载条采用了响应式设计,在不同的分辨率的显示器下完美 ...
- 一款纯css3实现的条纹加载条
之前为大家带来了很多加载动画. 基于prefixfree.js的进度加载条 ,基于jquery带百分比的响应式进度加载条.今天给大家分享一款纯css3实现的条纹加载条.带有响应式的效果.效果图如下 : ...
- jQuery页面加载初始化的3种方法
jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(functio ...
- js jquery 页面加载初始化方法
js jquery 页面加载初始化方法 一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...
- jQuery自动加载更多程序
1.1.1 摘要 现在,我们经常使用的微博.微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据,这种方式加快了数据的加载速度,由 ...
- jquery动态加载问题
对于append的元素,原有的方法不生效 解决:用on方法 找到的:http://www.zhidao91.com/jquery-html-live-on/ 解决使用jQuery采用append添加的 ...
- jQuery+zTree加载树形结构菜单
jQuery+zTree加载树形结构菜单 由于项目中需要设计树形菜单功能,经过一番捣腾之后,终于给弄出来了,所以便记下来,也算是学习zTree的一个总结吧. zTree的介绍: 1.zTree 是利用 ...
- (转载) jQuery 页面加载初始化的方法有3种
jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(functio ...
- 纯css3实现的动画加载条
之前大大家分享了很多款加载条.今天给大家带来一款纯css3实现的动画加载条. 这款加载条适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8 ...
随机推荐
- Myeclipse中如何修改Tomcat的端口号
一,使用 Myeclipse 中自带的 tomcat 右键 configure 弹出窗口 在 port Number 中修改 端口号即可: 二,配置的 tomcat 如果用上述的方法,只能打开这样的窗 ...
- HTML5简单入门系列（二）
前言 上篇中写到HTML5中的画布(canvas)元素,查看了canvas其他的资料,发现这个元素相关内容太多,鉴于本系列只是基础(主要是LZ也是初学),不再做太多介绍,有机会的话再单独写相关内容.说 ...
- spring3+hibernate3+（dbcp+oracle+拦截器事务配置）整合（一）
1.applicationContext-base.xml文件 <?xml version="1.0" encoding="UTF-8"?>< ...
- SSH 概念及使用详解
注意:转载请注明出处:http://www.programfish.com/blog/?p=124 SSH 基本概念 SSH 英文全称是secure shell,字面意思:安全的shell. SSH协 ...
- [原]C++程序示例：涉及到抽象类、继承…
C++复习题. 有助于理解: .h与.cpp分离 基类.派生类.抽象类 多态.纯虚函数 对象指针.引用 派生类使用基类的构造函数 ... =============================== ...
- css制作最简单导航栏
css制作最简单导航栏
- Hits per second 下降的几个原因
1.首先看看服务器的资源消耗情况,可能是服务器 处理不了那么多请求, 有很多请求都在等待,此时可以监控一下服务器的资源 看看是不是有很多等待队列 是不是有很多的等待的请求,可用vmstat命令,第一个 ...
- eclipse 使用mvn模块化开发
1.创建maven父工程步骤:new-->other-->选择maven project-->next-->勾选create a simple project-->nex ...
- wget 测试cdn
可以通过wget 或curl 指定代理ip来访问同一个链接的不同cdn响应页面.来测试不同cdn间的数据同步问题.
- 在Raspberry上使用小度WIFI
小度WIFI价格便宜量又足,我一真用它!做个广告先! 它使用联发科MT7601的芯片,质量不错,就是Raspberry下不能直接支持. 首先下载驱动 http://www.mediatek.com/_ ...