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


Posted in Javascript onOctober 29, 2015

本文实例讲述了jQuery实现彩带延伸效果的网页加载条loading动画。分享给大家供大家参考,具体如下:

这里介绍的jQuery彩带效果网页加载条动画,我觉得挺有创意的,虽然难度不算大,但能想到用这样一个背景来做Loading加载条,也实属不易,不服气的,你为什么就没有想到这样做呢?本网页加载条效果使用了jQuery插件。

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面初加载的动画</title>
<style type="text/css">
body{margin:0;}
.top_bg{height:5px;width:0;background-color:#093; background-image:url(images/colorbg.png);}/*如果你喜欢博主的那个彩带背景欢迎下载,直接把background:#f03换成背景*/
</style>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
   //顶部背景动画
   $(".top_bg").animate({
    width: "100%"
   },
   {
    queue: false,
    duration:4000
   });
 })
</script>
</head>
<body>
 <div class="top_bg"></div>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery实现漂浮在网页右侧的qq在线客服插件示例
May 13 Javascript
JS实现局部选择打印和局部不选择打印
Apr 03 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
Oct 29 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
详解使用Node.js 将txt文件转为Excel文件
Jul 05 Javascript
基于vue2实现上拉加载功能
Nov 28 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 Javascript
js代码规范之Eslint安装与配置详解
Sep 08 Javascript
微信小程序之onLaunch与onload异步问题详解
Mar 28 Javascript
对layui初始化列表的CheckBox属性详解
Sep 13 Javascript
如何用JavaScript学习算法复杂度
Apr 30 Javascript
jquery实现的伪分页效果代码
Oct 29 #Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 #Javascript
jquery实现模拟百分比进度条渐变效果代码
Oct 29 #Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 #Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
Oct 29 #Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 #Javascript
JavaScript操作URL的相关内容集锦
Oct 29 #Javascript
You might like
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
关于javascript DOM事件模型的两件事
2010/07/22 Javascript
Javascript计算时间差的函数分享
2011/07/04 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
简单了解常用的JavaScript 库
2020/07/16 Javascript
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
跟老齐学Python之Python文档
2014/10/10 Python
利用python程序生成word和PDF文档的方法
2017/02/14 Python
用pickle存储Python的原生对象方法
2017/04/28 Python
使用DataFrame删除行和列的实例讲解
2018/04/08 Python
使用python爬虫获取黄金价格的核心代码
2018/06/13 Python
torch 中各种图像格式转换的实现方法
2019/12/26 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
世界上最大的折扣香水店:FragranceNet.com
2016/10/26 全球购物
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
求职简历自我评价范例
2014/03/12 职场文书
销售会计岗位职责
2014/03/15 职场文书
小学教师个人先进事迹材料
2014/05/17 职场文书
应届生自荐信
2014/06/30 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
工资收入证明样本(5篇)
2014/09/16 职场文书
单位单身证明样本
2014/10/11 职场文书
2015年党小组工作总结
2015/05/26 职场文书
python爬虫之selenium库的安装及使用教程
2021/05/23 Python
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技