jquery动画1.加载指示器

该系列文章是我阅读《jQuery 1.4 Animation Techniques》后的总结，有兴趣的朋友可以去看原版书籍。
　　动画效果对于丰富网站的交互体验起到了不可或缺的作用，他可以让你的站点更酷，更吸引人。

什么时候使用动画：
　　1.当显示或隐藏页面、弹出框或内容区域的时候；
　　2.当一些内容从页面的一个地方移动到其他地方的时候；
　　3.当页面中的一些内容，应用户的操作而产生状态改变的时候；
　　4.当一些内容在几种状态间转变的时候；
　　5.引导用户去执行某些操作，或者引起他们对某些很重要信息注意的时候。

什么时候不应使用动画：
　　1.当某些操作是需要用户频繁重复操作的时候；
　　2.当设备无法充分显示动画效果的时候（也就是说该动画会占用计算机的很多资源，会影响到性能）；
　　3.即时操作。

　　当然这些规定都不是绝对的，你需要根据你的实际情况来决定是否使用动画。下面是一些checklist（验证列表），只要满足下面几条选项，你的动画就是有价值的。
　　1.动画是否适合你的目标客户；
　　2.动画是否实用；
　　3.动画是否增强了用户体验；
　　4.动画是否以合适的速度运行。

　　下面我们开始我们的第一个例子，创建一个动画加载指示器，我直接把源码贴出来，上面有注释。


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//创建loader div对象
//这里使用jQueryjQuery(html,[ownerDocument])方法，不懂得朋友去看下api
var loader = $("<div></div>", {
id: 'loader'
}).css('display', 'none');
//创建显示条
var bar = $('<span></span>').css('opacity', 0.2);
//时间间隔对象
var loadingInterval = null;
//创建三个显示条，并添加到loader对象中
for (var i = 0; i < 3; i++) {
bar.clone()//使用clone的可以提高性能，不用每次都去重新创建对象，clone比创建来的快
.addClass('bar-' + i).appendTo(loader);
}
//将loader添加到go按钮后面
loader.insertAfter('#go');
function runLoader() {
//获取三个显示条
var firstBar = loader.children(':first'),
secondBar = loader.children().eq(1),
thirdBar = loader.children(':last');
//分别对三个显示条执行动画效果
//总的效果就是依次让三个显示条，透明度变为1，再变为0.2
firstBar.fadeTo('fast', 1, function () {
firstBar.fadeTo('fast', 0.2, function () {
secondBar.fadeTo('fast', 1, function () {
secondBar.fadeTo('fast', 0.2, function () {
thirdBar.fadeTo('fast', 1, function () {
thirdBar.fadeTo('fast', 0.2)
});
});
});
});
});
};
//对go按钮设置toggle事件
$('#go').toggle(function () {
//第一次点击的时候，显示loader，创建setInterval，每1200毫秒执行一次runLoader
loader.show();
runLoader();
loadingInterval = setInterval(runLoader, 1200);
}, function () {
//再次点击的时候，隐藏loader，删除setInterval
loader.hide();
clearInterval(loadingInterval);
});
});
</script>
<style type="text/css">
#loader
{
margin: 10px 0 0 36px;
}
#loader span
{
display: block;
width: 6px;
float: left;
margin-right: 6px;
border: 1px solid #336633;
position: relative;
background-color: #ccffcc;
}
#loader .bar-0
{
height: 15px;
bottom: -20px;
}
#loader .bar-1
{
height: 25px;
bottom: -10px;
}
#loader .bar-2
{
height: 35px;
margin-right: 0;
}
</style>
</head>
<body>
<input id="go" type="button" value="Initiate the action" />
</body>
</html>

赞 (0)

相关推荐

  • 分享8款优秀的 jQuery 加载动画和进度条插件

    分享8款优秀的 jQuery 加载动画和进度条插件

    加载动画和进度条在网站和 Web 应用中的使用非常流行.虽然网速越来越快,但是我们的网站越来越复杂,同时用户对网站的使用体验的要求也越来越高.在内容加载缓慢的时候,使用时尚的加载动画和进度条告诉用户还有内容正在加载是一种非常好的方式.今天这篇文章向大家推荐10款基于 jQuery 实现的加载动画和进度条插件. Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载    在线演示 Percentage Loader 一款轻量的 jQue

  • jQuery生成假加载动画效果

    在使用PDFObject.js时,由于后台需要转换数据,在前台显示的时候,有很长一段时间显示空白页面,所以想到写一个假的加载动画 script片段: <script type="text/javascript"> var bar = 0; var line = "||" ; var amount ="||" ; function count(){ bar= bar+2 ; amount =amount + line; $("

  • jQuery Ajax 加载数据时异步显示加载动画

    jQuery Ajax 加载数据时异步显示加载动画

    ajax加载后台数据就不说的那么细了. 看下面代码首先前台上放置代码 <div id="loadgif" style="width:66px;height:66px;position:absolute;top:50%;left:50%;"> <img alt="加载中..." src="../../Images/loading1.gif"/> </div> 在js脚本文件中首先把这个图片动画

  • jquery Ajax 实现加载数据前动画效果的示例代码

    复制代码 代码如下: $(document).ready(function(){     $.ajax({        type:"get",        cache:false,        url:"ajaxpage.aspx?t=getcity",        dataType:"json",        beforeSend:function(){           $("#vvv").append('&l

  • jQuery实现彩带延伸效果的网页加载条loading动画

    jQuery实现彩带延伸效果的网页加载条loading动画

    本文实例讲述了jQuery实现彩带延伸效果的网页加载条loading动画.分享给大家供大家参考,具体如下: 这里介绍的jQuery彩带效果网页加载条动画,我觉得挺有创意的,虽然难度不算大,但能想到用这样一个背景来做Loading加载条,也实属不易,不服气的,你为什么就没有想到这样做呢?本网页加载条效果使用了jQuery插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-n-color-cha-web-loading-demo/

  • jquery动画1.加载指示器

    该系列文章是我阅读<jQuery 1.4 Animation Techniques>后的总结,有兴趣的朋友可以去看原版书籍. 动画效果对于丰富网站的交互体验起到了不可或缺的作用,他可以让你的站点更酷,更吸引人. 什么时候使用动画: 1.当显示或隐藏页面.弹出框或内容区域的时候: 2.当一些内容从页面的一个地方移动到其他地方的时候: 3.当页面中的一些内容,应用户的操作而产生状态改变的时候: 4.当一些内容在几种状态间转变的时候: 5.引导用户去执行某些操作,或者引起他们对某些很重要信息注意的时

  • jquery实现ajax加载超时提示的方法

    本文实例讲述了jquery实现ajax加载超时提示的方法.分享给大家供大家参考,具体如下: index.php <!doctype html> <html> <head> <meta charset="utf-8"/> <title>加载超时</title> <script type="text/javascript" src="http://lib.sinaapp.com/js

  • jQuery实现图片加载完成后改变图片大小的方法

    本文实例讲述了jQuery实现图片加载完成后改变图片大小的方法.分享给大家供大家参考,具体如下: 要改变图片的大小并不难,可以用jQuery操作css改变.但是前提是要判断图片是否加载完成.主要是通过jQuery的load事件和onreadystatechange来判断其状态. 对于IE6,用onreadystatechange可以直接处理,在IE7中,则需要用定时器来判断图片的readystate状态.而对于FF和Chrome刚可以直接用load事件来判断. 以下是在实例中使用的完整代码: <

  • jQuery与JS加载事件用法分析

    jQuery与JS加载事件用法分析

    本文实例分析了jQuery与JS加载事件用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea

  • jQuery实现动态加载select下拉列表项功能示例

    本文实例讲述了jQuery实现动态加载select下拉列表项功能.分享给大家供大家参考,具体如下: 需求说明: 以前使用的select下拉列表都是静态的,select 的option数据都是写死的.现在项目中的select需要根据不同的场景使用不同的数据,解决方式就是动态加载option数据. 代码部分: 下面步骤介绍了如何从数据库获取数据,并动态的在前端显示. 步骤一:jsp页面静态的select: <div> <select id="selectSM"> &

  • 关于 jQuery Easyui异步加载tree的问题解析

    关于 jQuery Easyui异步加载tree的问题解析

    想要实现从本地中加载json文件,通过事件来动态的插入到ul中时,遇到了一小bug html中代码是这样的 <ul class="easyui-tree" id="tt"></ul> js中的代码 $(".next-menu:nth-child(1) a").click(function() { var $IDstr = $(this).attr("id"), $treeIDNum = parseInt

  • jQuery在页面加载时动态修改图片尺寸的方法

    本文实例讲述了jQuery在页面加载时动态修改图片尺寸的方法.分享给大家供大家参考.具体如下: $(window).bind("load", function() { // IMAGE RESIZE $('#product_cat_list img').each(function() { var maxWidth = 120; var maxHeight = 120; var ratio = 0; var width = $(this).width(); var height = $(

  • asp.net+jquery滚动滚动条加载数据的下拉控件

    asp.net+jquery滚动滚动条加载数据的下拉控件

    这样的需求貌似自己感觉不是很合理,因为数据多了如此下拉无论从人还是机器操作都比较痛苦. 没办法由于需求下来了,只能按需求操作.网上找了很多相关控件都感觉有点庞大,占资源比较多.没办法自己花半天时间弄出个半成品自定义控件,拿出来分享下,如有高手看了请多指点. 需求:AJAX滚动滚动条加载数据的下拉列表 控件名称:Webcombo 所用技术:ASP.NET(C#),jQuery,ASP.NET一般处理文件(.ashx) 下拉列表具体实现:用DIV模拟下拉列表,input和图片模拟下拉框.最终结果如下

  • JQuery实现Ajax加载图片的方法

    本文实例讲述了JQuery实现Ajax加载图片的方法.分享给大家供大家参考,具体如下: 最近在学习JQuery,想从原理上模拟一下无刷新的相册浏览. 最先想到的思路是利用缓存,也就是先显示提示消息,然后get图片,在get完的时候回调,将img标签的src改掉,由于刚刚get过,有了缓存,所以图片会立刻显示出来. 页面元素: <input class="picbtn" type="button" value="Next" /> <

随机推荐