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 相关文章推荐
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
JavaScript使用function定义对象并调用的方法
Mar 23 Javascript
js实现汉字排序的方法
Jul 23 Javascript
JavaScript中定义类的方式详解
Jan 07 Javascript
简单理解vue中el、template、replace元素
Oct 27 Javascript
JS前端加密算法示例
Dec 22 Javascript
javascript 的变量、作用域和内存问题
Apr 19 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 Javascript
详解jquery和vue对比
Apr 16 jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
vue a标签点击实现赋值方式
Sep 07 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
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
PHP观察者模式原理与简单实现方法示例
2017/08/25 PHP
php5与php7的区别点总结
2019/10/11 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
用JS实现的一个include函数
2007/07/21 Javascript
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
vue实现移动端项目多行文本溢出省略
2020/07/29 Javascript
Python函数中的函数(闭包)用法实例
2016/03/15 Python
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
python 编码规范整理
2018/05/05 Python
python实现词法分析器
2019/01/31 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
python map比for循环快在哪
2020/09/21 Python
Python做图像处理及视频音频文件分离和合成功能
2020/11/24 Python
flask项目集成swagger的方法
2020/12/09 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
大学生见习期满自我鉴定
2014/09/13 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
2016年乡镇综治宣传月活动总结
2016/03/16 职场文书
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
Nginx源码编译安装过程记录
2021/11/17 Servers