描述了利用jQuery实现功能区扩展的网页加载栏的加载动画。分享给大家参考，如下：

这里介绍的jQuery功能区效果网页加载动画相当有创意。虽然难度不大，但是想到用这样的背景来做加载栏就不容易也不服气。你为什么没有想到要这么做？jQuery插件在这个网页插件效果中使用。

运行效果截图如下：

在线演示地址如下：

http://demo . JB 51 . 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/XHTML 1/DTD/XHTML 1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；Charset=utf-8' /title动画最初加载到页面上/title styletype=' text/CSS '正文{ margin:0}.top _ bg { height:5px宽度：0；背景色： # 093；背景-image : URL(images/colorbg . png)；}/*如果你喜欢博主丝带的背景，请下载。将background:#f03直接更改为background *//style script src=' http : jquery-1 . 7 . 2 . min . js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(文档)。ready(function(){ //顶部背景动画$(')。top _ BG’)。animate ({width :' 100%'}，{queue : false，duration 33604000 })；})/script/head body div class=' top _ BG '/div/body/html希望这篇文章对jQuery编程有所帮助。