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 相关文章推荐
用js得到网页中所有的div的id
Oct 19 Javascript
在textarea中显示html页面的javascript代码
Apr 20 Javascript
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 Javascript
JS运动相关知识点小结(附弹性运动示例)
Jan 08 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
Aug 05 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
Jan 19 Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
Aug 30 Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
js+canvas实现画板功能
Sep 13 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
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
在同一窗体中使用PHP来处理多个提交任务
2006/10/09 PHP
一步一步学习PHP(5) 类和对象
2010/02/16 PHP
PHP eval函数使用介绍
2013/12/08 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
php使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
Jquery 基础学习笔记
2009/05/29 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
js检验密码强度(低中高)附图
2014/06/05 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
js实现多选项切换导航菜单的方法
2015/02/06 Javascript
JavaScript性能优化之小知识总结
2015/11/20 Javascript
javascript html实现网页版日历代码
2016/03/08 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
python中sleep函数用法实例分析
2015/04/29 Python
常用python编程模板汇总
2016/02/12 Python
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
Django REST framework 如何实现内置访问频率控制
2019/07/23 Python
Python 变量的创建过程详解
2019/09/02 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
地道战观后感300字
2015/06/04 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers
Nginx location 和 proxy_pass路径配置问题小结
2021/09/04 Servers