jQuery实现彩带延伸效果的网页加载条loading动画
更新时间：2015年10月29日 11:25:46 作者：企鹅
这篇文章主要介绍了jQuery实现彩带延伸效果的网页加载条loading动画,涉及jQuery动画效果的实现技巧,非常简单实用,需要的朋友可以参考下
本文实例讲述了jQuery实现彩带延伸效果的网页加载条loading动画。分享给大家供大家参考，具体如下：
这里介绍的jQuery彩带效果网页加载条动画，我觉得挺有创意的，虽然难度不算大，但能想到用这样一个背景来做Loading加载条，也实属不易，不服气的，你为什么就没有想到这样做呢？本网页加载条效果使用了jQuery插件。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-n-color-cha-web-loading-demo/
具体代码如下：
<!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程序设计有所帮助。
相关文章
本文主要介绍jQuery中利用appendTo()方法追加元素已实现左右移动的功能，希望对大家有所帮助。2016-04-04
详解jquery validate实现表单验证 （正则表达式）
本篇文章主要介绍了jquery validate实现表单验证 （正则表达式），用户填写表单时，可以快速地对用户填写的数据进行验证，并做出反馈。有兴趣的可以了解一下。2017-01-01
这篇文章主要介绍了jQuery 禁止表单用户名、密码自动填充功能,需要的朋友可以参考下2017-10-10
这篇文章主要介绍了jQuery点击按钮弹出遮罩层且内容居中特效，需要的朋友可以参考下2015-12-12
浅谈jquery中的each方法$.each、this.each、$.fn.each
下面小编就为大家带来一篇浅谈jquery中的each方法$.each、this.each、$.fn.each。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
纯手工打造、兼容性还哦可、可移植任何项目感兴趣的朋友可以学习下，希望对你的jquery提升有所帮助2013-05-05
基于jQuery多重图片无限循环动画效果，本文给大家分享基于jQuery倾斜打开侧边栏菜单特效代码，感兴趣的朋友可以参考下2015-09-09
编写zQuery库初始起因一则是由于旧版的jQuery执行效率（现在的版本好像还可以），二则是对javascript语言的喜爱，每每总是亲历亲为，最后由于在项目中的需求，加入了对事件侦听机制的和DOM节点操作方法的扩展。2008-06-06
jQuery 工具提示可以让网站上一些小的帮助信息显示更加直观，提升用户的体验。2011-05-05
这篇文章主要介绍了jquery实现鼠标滑过小图查看大图的方法,涉及jquery鼠标事件及图片样式动态操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
最新评论