什么是网站标题,wordpress做的网站效果,wordpress头像地址修改,做影视网站用什么网盘最好先展示一下已经实现的效果#xff1a; 预览地址#xff1a;http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条#xff0c;想用在pc上。 网上搜了一下#xff0c;看到几种页面loading的方法#xff1a; 1.在body头部加入lo…先展示一下已经实现的效果 预览地址http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条想用在pc上。 网上搜了一下看到几种页面loading的方法 1.在body头部加入loading元素在body页脚写入脚本让loading元素消失。 2.基于jquery在页面的不同位置插入脚本设置滚动条的宽度。 简单分析一下 第一个明显不是我想要的。 第二个要在body前加载jquery然后还要使用到jquery的动画方法性能肯定达不到最优的状态。 自己的解决方法原生JScss3 上面的方法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 idtop/div
scriptLoadingBar.setWidth(1)/scriptdiv idnav/div
scriptLoadingBar.setWidth(20)/scriptdiv idbanner/div
scriptLoadingBar.setWidth(40)/scriptdiv idmain/div
scriptLoadingBar.setWidth(60)/scriptdiv idright/div
scriptLoadingBar.setWidth(90)/scriptdiv idfoot/div
scriptLoadingBar.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();},/*记录当前宽度*/width:0,/*页面里LoadingBar div*/oLoadDiv : false,/*开始*/setWidth : function(w){if(!this.oLoadDiv){this.init();}var oLoadDiv this.oLoadDiv,width Number(w) || 100;/*防止后面写入的width小于前面写入的width*/(widththis.width) ? widththis.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;background-color:#f90;height: 3px;width: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); }
} 转载于:https://www.cnblogs.com/dtdxrk/p/4165280.html
