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 相关文章推荐
JavaScript中的细节分析
Jun 30 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
Jan 19 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 Javascript
vue axios 表单提交上传图片的实例
Mar 16 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
vue-router中scrollBehavior的巧妙用法
Jul 09 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
Sep 27 Javascript
vue项目中实现图片预览的公用组件功能
Oct 26 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
JavaScript this关键字指向常用情况解析
Sep 02 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
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
PHP实现的无限分类类库定义与用法示例【基于thinkPHP】
2018/08/06 PHP
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
jquery操作select方法汇总
2015/02/05 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
js判断checkbox是否选中个数的方法(超简单)
2016/08/19 Javascript
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
关于vue.js过渡css类名的理解(推荐)
2017/04/10 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
2017/04/14 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
在Python中利用Pandas库处理大数据的简单介绍
2015/04/07 Python
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
Python 实现数据库更新脚本的生成方法
2017/07/09 Python
Python实现判断给定列表是否有重复元素的方法
2018/04/11 Python
对Python之gzip文件读写的方法详解
2019/02/08 Python
详细整理python 字符串(str)与列表(list)以及数组(array)之间的转换方法
2019/08/30 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
介绍一下常见的木马种类
2014/11/15 面试题
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
运动会邀请函范文
2014/01/31 职场文书
《落花生》教学反思
2014/02/25 职场文书
2014年大学生就业规划书
2014/04/04 职场文书
2014年党员整改措施
2014/10/24 职场文书
2015关爱留守儿童工作总结
2014/12/12 职场文书
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL