一键复制
人的记忆力会随着岁月的流逝而衰退，写作可以弥补记忆的不足，将曾经的人生经历和感悟记录下来，也便于保存一份美好的回忆。大家想知道怎么样才能写一篇比较优质的范文吗？以下是我为大家搜集的优质范文，仅供参考，一起来看看吧
js页面加载进度条 jquery 滚动到顶部篇一
一、纯css实现
昨天在网上闲逛时，看到一个博客的页面最顶部有一个进度条特效，感觉挺好的'，就分析了一下代码，找出了其中的关键部份，使用纯css实现的，给大家分享一下。
@-moz-keyframes progressing {
0% {
width:0px;
}
100% {
width:100%;
}
}
@-webkit-keyframes progressing {
0% {
width:0px;
}
100% {
width:100%;
}
}
.progress {
width:100%;
height:5px;
overflow:hidden;
background-color:#27ccc0;
position:fixed;
top:0;
left:0;
z-index:9;
-moz-animation:progressing 2s ease-out;
-webkit-animation:progressing 2s ease-out;
}
"<
二、jquery实现
一个在页面顶部显示的进度条效果，像在智能手机上浏览网页一样，手机上的浏览器进度条一般都在屏幕顶部，一条极细的小线条，当页面加载的时候，它就不断的加载显示进度，本网页进度条特效与此十分相似，基于jquery插件实现的效果。
jquery(document).ready(function(){
jquery("#web_loading div").animate({width:"100%"},800,function(){
settimeout(function(){jquery("#web_loading div").fadeout(500);
});
});
});
// ]]>
z-index:99999;
width:100%;
}
#web_loading div{
width:0;
height:5px;
background:#ff9f15;
}
"【纯css和jquery实现的在页面顶部显示的进度条效果】相关文章：
1.关于jquery实现页面顶部显示的进度条效果完整实例2.jquery css方法动态修改css属性3.jquery中动态效果4.jquery设置css属性的示例及介绍5.有关jquery效果 slidetoggle() 方法(在隐藏和显示之间切换)6.jquery动画效果学习笔记简介7.关于jquery实现高亮显示的方法介绍8.jquery中parent()和siblings()的问题
