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程序设计有所帮助。

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。

nodejs初步体验篇 - 2015-11-24 14:11:04

前言:写这篇文章的由来: 1.前段时间单位有新项目启动,服务端要做的工作不多也不算麻烦,就是处理一些中间层的服务,而且我们团队里面个个都会JavaScript,领导就决定试试服务器端的JavaScript,结果本人有幸被派去研究了几天Node,怀着鸡冻的心情开始了node.js的篇章,这篇文章也就是为这几天研究的总结。 2.一个JavaScript工程师如果没听过node.js那么我想你是不是错过了什么,每个优秀的前端工程师都有必要去了解后台处理流程,那么如果又能从JavaScript出发,岂不是一件很美
JavaScript开发经典技巧分享给大家: 1、首次为变量赋值时务必使用var关键字 变量没有声明而直接赋值得话,默认会作为一个新的全局变量,要尽量避免使用全局变量。 2、使用===取代== ==和!=操作符会在需要的情况下自动转换数据类型。但===和!==不会,它们会同时比较值和数据类型,这也使得它们要比==和!=快。 [10] === 10 // is false [10] == 10 // is true '10' == 10 // is true '10' === 10 // is false
本文实例讲述了select选择框内容左右移动添加删除。分享给大家供大家参考。具体如下: select选择框内容左右移动,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,运行效果图: 具体代码如下 !DOCTYPE htmlhtmlhead meta charset="utf-8" / titleindex/title/headbody div select id="leftSelector" multiple="multiple" name="SmsListOnLeft" option value
一、数组的常用方法 1:join(); 将数组转为字符串显示。不输入参数,默认以逗号连接;输入参数,则以参数连接。 var arr=[1,2,3];console.log(arr.join()); // 1,2,3;console.log(arr.join("_")); // 1_2_3;console.log(arr); // [1,2,3]; 原数组不变。 2:reverse(); 将数组逆序排列,原数组被修改。 var arr=[1,2,3];var arr2=arr.reverse();conso
本文实例讲述了javascript实现动态统计图的代码。分享给大家供大家参考。具体如下: 运行效果截图如下: 具体代码如下 html代码: div id="content" div class="legend" h1汽车销量:/h1 div class="skills" ul li class="jq"大众/li li class="css"丰田/li li class="html"别克/li li class="php"福特/li li class="sql"长安/li /ul /div /div di

js实现索引图片切换效果 - 2015-11-23 17:11:16

本文实例讲述了js实现索引图片切换效果的代码。分享给大家供大家参考。具体如下: 运行效果截图如下: 具体代码如下 html代码: div id="slideshowHolder" img src="img/1.jpg" / img src="img/2.jpg" / img src="img/3.jpg" / /div css代码: .ft-prev, .ft-next { background-color: #000; padding: 0 10px; color:#fff; } js代码: $(doc
首先先说一说$. browser browser就是用来获取浏览器基本信息的。 jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support 。 在更新的 2.0 版本中,将不再支持 IE 6/7/8。 以后,如果用户需要支持 IE 6/7/8,只能使用 jQuery 1.9。 解决方法 :加入以下js即可 (function(jQuery){ if(jQuery.browser) return; jQuery.browser
一、主要介绍: 这题采用之前的技术,根据table的rows属性,获得数组,然后对数组设置样式,所以颜色就出来了。 1).全选复选框 ,通过 var nodess=document.getElementsByName("mail"); for(var x=0;xnodess.length;x++){nodess[x].checked=nodes.checked;} 复选框函数进行 2).按钮全选,反选,和取消全选, 可以用一个函数写,传入不同的参数AllBybtn(num)类型即可 函数里面 根据js的特
本文实例讲述了jQuery实现分隔条左右拖动功能的实现代码。分享给大家供大家参考。具体如下: 运行效果截图如下: 具体内容如下 !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"html head title New Document /title script type="text/javascript" src="jquery.min.js"/scrip

jquery背景跟随鼠标滑动导航 - 2015-11-21 17:11:04

本文实例讲述了支持背景图片上下滑动的竖向jQuery菜单导航特效代码,分享给大家供大家参考。具体如下: 运行效果截图如下: 具体代码如下 html xmlns="http://www.w3.org/1999/xhtml"headmeta charset="gb2312"title左边跟随鼠标滑动导航/titlemeta name="keywords" content="滑动导航" /meta name="description" content="左边跟随鼠标滑动导航" /style/*---------