|
{'HTML':{...},'CSS':{...},'JavaScript':{...}} |
:: :: :: ::订阅  ::管理 |
|
先展示一下已经实现的效果：
看到手机上的浏览器内置了页面的加载进度条，想用在pc上。 网上搜了一下，看到几种页面loading的方法：1.在body头部加入loading元素，在body页脚写入脚本让loading元素消失。 2.基于jquery，在页面的不同位置插入脚本，设置滚动条的宽度。 简单分析一下：第一个明显不是我想要的。 第二个要在body前加载jquery，然后还要使用到jquery的动画方法，性能肯定达不到最优的状态。 自己的解决方法：原生JS+css3上面的方法2其实是可以使用的方法，但是我不想在页面前加载jquery，怎么办？ 很简单，自己用原生的方法写一个。 给元素添加css3的动画属性，让他能在改变宽度的时候有动画效果。 transition:all 1s;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s; 在页面插入一段style，里面有元素的css和一个css3动画暂停的类 .animation_paused{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-ms-animation-play-state:paused;
animation-play-state:paused;
}
然后在页面里不同的位置调用方法，设置滚动条的宽度即可， 需要注意的是方法的引用要在<head></head>里 <div id="top"></div>
<script>LoadingBar.setWidth(1)</script>
<div id="nav"></div>
<script>LoadingBar.setWidth(20)</script>
<div id="banner"></div>
<script>LoadingBar.setWidth(40)</script>
<div id="main"></div>
<script>LoadingBar.setWidth(60)</script>
<div id="right"></div>
<script>LoadingBar.setWidth(90)</script>
<div id="foot"></div>
<script>LoadingBar.setWidth(100)</script>
插件源码：/*
========================================================================
LoadingBar 页面加载进度条
@auther LiuMing
@blog http://www.cnblogs.com/dtdxrk
demo 在body里填写需要加载的进度
LoadingBar.setWidth(number)
========================================================================
*/
var LoadingBar = {
/*初始化*/
init:function(){
this.creatStyle();
this.creatLoadDiv();
},
/*记录当前宽度*/
0,
/*页面里LoadingBar div*/
oLoadDiv : false,
/*开始*/
setWidth : function(w){
if(!this.oLoadDiv){this.init();}
var oLoadDiv = this.oLoadDiv,
width = Number(w) || 100;
/*防止后面写入的width小于前面写入的width*/
(width<this.width) ? width=this.width : this.width = width;
oLoadDiv.className = 'animation_paused';
oLoadDiv.style.width = width + '%';
oLoadDiv.className = '';
if(width === 100){this.over(oLoadDiv);}
},
/*页面加载完毕*/
over : function(obj){
setTimeout(function(){
obj.style.display = 'none';
},1000);
},
/*创建load条*/
creatLoadDiv : function(){
var div = document.createElement('div');
div.id = 'LoadingBar';
document.body.appendChild(div);
this.oLoadDiv = document.getElementById('LoadingBar');
},
/*创建style*/
creatStyle : function(){
var nod = document.createElement('style'),
str = '#LoadingBar{transition:all 1s;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;height: 3px;0; position: fixed;top: 0;z-index: 99999;left: 0;font-size: 0;z-index:9999999;_position:absolute;_top:expression(eval(document.documentElement.scrollTop));}.animation_paused{-webkit-animation-play-state:paused;-moz-animation-play-state:paused;-ms-animation-play-state:paused;animation-play-state:paused;};'
nod.type = 'text/css';
//ie下
nod.styleSheet ? nod.styleSheet.cssText = str : nod.innerHTML = str;
document.getElementsByTagName('head')[0].appendChild(nod);
}
}
posted on 2014-12-15 17:12 dtdxrk阅读( ... ) 评论( ... )编辑收藏 |
