【原生JS插件】LoadingBar页面顶部加载进度条

先展示一下已经实现的效果:

预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html

 

看到手机上的浏览器内置了页面的加载进度条,想用在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();},/*记录当前宽度*/width: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;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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/259620.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

qtp启动java程序_转: QTP六脉神剑之调用Java程序

查看( 1147 ) /评论( 21 )六脉神剑之调用程序0Xp1zLN_0版权声明&#xff1a;原创作品&#xff0c;转载请以链接方式注明出自http://www.51testing.com/?35&#xff0c;否则将追究法律责任。51Testing软件测试网y|X,taS51Testing软件测试网b;|w6I"g6oK本文出自songfun的51…

第八章 Python 对象和类

一、什么是对象 在 Pyth 中&#xff0c;对象就是经过实例化的&#xff0c;具体可以操作的一组代码的组合&#xff1b; 对象一般包含数据&#xff08;变量&#xff0c;更习惯称之为属性 attribute&#xff09;&#xff0c;也包含代码&#xff08;函数&#xff0c;也称之为方法&a…

Spring WebSocket初探2 (Spring WebSocket入门教程)

2019独角兽企业重金招聘Python工程师标准>>> WebSocket前端准备 SockJS&#xff1a; SockJS 是一个浏览器上运行的 JavaScript 库&#xff0c;如果浏览器不支持 WebSocket&#xff0c;该库可以模拟对 WebSocket 的支持&#xff0c;实现浏览器和 Web 服务器之间低延迟…

String类的使用 Part2

StringBuilder 类的使用 属性&#xff1a; namespace StringBuilderTest {class Program{static void Main(string[] args){StringBuilder s new StringBuilder("hello,world!");Console.WriteLine(s);//Length属性Console.WriteLine("s.Length{0}", s.Le…

JAVA项目怎么不是蓝色_解决IDEA创建maven项目时pom.xml没有变蓝的问题

如下所示&#xff1a;选中pom.xml&#xff0c;右键点击add as maven project&#xff0c;稍等片刻后就可以了补充知识&#xff1a;Idea导入maven项目不自动识别pom.xml*Idea导入maven项目不自动识别pom.xml*当在idea中导入maven项目时&#xff0c;不能自动识别pom文件解决方法&…

C# 6.0:Expression – Bodied Methods

Expression-bodied 方法是C# 6.0 中另一个能简化代码的特性。我们已经对lambda表达式将funciton和delegation关联起来的这种用法很熟悉了。Expression-bodied 将lambda 表达式的这种用法扩展到了方法上。 像下面代码所示&#xff0c;我们有一个GetTime() 方法返回一个格式化的时…

POJ 1228 Grandpa's Estate --深入理解凸包

题意&#xff1a; 判断凸包是否稳定。 解法&#xff1a; 稳定凸包每条边上至少有三个点。 这题就在于求凸包的细节了&#xff0c;求凸包有两种算法&#xff1a; 1.基于水平序的Andrew算法 2.基于极角序的Graham算法 两种算法都有一个类似下面的语句&#xff1a; for(int i0;i&…

赵强老师免费公开课第一季:Hadoop的背景起源

标签&#xff1a;免费直播课 Hadoop 大数据 赵强原创作品&#xff0c;允许转载&#xff0c;转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://51edu.blog.51cto.com/8899635/1897555 Hadoop大数据免费公开课招募啦~~~赵强…

.NET Windows服务应用程序

此文旨在记录个人对windows服务的理解以及学习记录&#xff0c;高人可以直接绕行。 1.Windows 服务体系结构 http://technet.microsoft.com/zh-cn/library/aa998749(vexchg.65).aspx Windows 服务&#xff08;也称服务应用程序&#xff09;是无论用户是否登录都运行在 Windows …

bootstrap-代码-内联代码

说明通过 <code> 标签包裹内联样式的代码片段示例<!DOCTYPE html> <html lang"zh-CN"><head><meta charset"utf-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"view…

java类似php魔术方法_PHP与类有关的几个魔术方法

与类有关的其他魔术方法序列化与反序列化技术含义&#xff1a;序列化&#xff1a;就是将一个变量所代表的“内存”数据&#xff0c;转换为“字符串”形式并持久保存在硬盘上的一种做法。反序列化&#xff1a;就是将序列化之后保存在硬盘上的“字符串数据”&#xff0c;恢复为其…

IIS ARR设置HTTP跳转到HTTPS

GUI Version - Select the website you wish to configure- In the “Features View” panel, double click URL Rewrite You will notice there are currently no rules configured for this site. Click “Add Rules…” in the Actions menu to the right of the “Features…

AutoCAD.NET API 最新(2012)教程下载及在线视频教程DevTV

Autodek最近发布了基于最新版的AutoCAD 2012的.net API开发教程。基本内容包括&#xff1a; Overview of .NETPlugin BasicsUser InteractionDatabase fundamentalsDictionariesUser InterfaceEventsInputPoint MonitorJigs现在就可以从AutoCAD开发者中心下载&#xff0c; 看图…

install python_python install on windows 10

图 1官网2、下载安装包&#xff1a;图 2 Downloads – windows图 3选择版本图 4选择离线安装版本图 5保存下载文件—文件名自己可以修改可能有人看到windows 几个版本&#xff0c;对几个版本有迷惑的地方&#xff0c;解释图 6几个版本的差异说明文字解释&#xff1a;An e…

iOS开发常见错误

错误1&#xff1a; 1.1这种错误都是storyboard有问题 解决&#xff1a;当前storyboard的Custom Class是MJViewController&#xff0c;代码中MJViewController继承自UITableViewController。 而storyboard目前提供的是UIViewController&#xff0c;并没有为MJViewController提供…

windows bat 批处理 !vm 合并快播文件

今天简单的写了一个bat批处理文件 用来处理快播的p2p的文件&#xff0c;一般回事这样的目录 你可以下载如下代码 echo off for /r %%a in (.) do (echo %%acd %%acopy /b *.!mv test.rmvb ) pause保存为merge.bat&#xff0c;就可以执行了 代码解释&#xff1a; 扫描该目录下的…

sso接口的调用

之前一直想sso接口已经写好了&#xff0c;登录注册功能是怎么调用的呢&#xff1f;原来在登录注册的jsp页面实现的接口的调用&#xff0c;页面的校验和验证功能在jsp页面即可实现。 注册页面&#xff1a; <% page language"java" contentType"text/html; cha…

[逆向][Writeup]ISG2015 flagfinder - .NET程序逆向

这个题目同样是一道.NET的逆向题&#xff0c;.NET的逆向方法在之前的博文中已经介绍过&#xff0c;这里不做重复的说明。本题的源程序可以在我的github上下载&#xff1a;https://github.com/gsharpsh00ter/reverse 0x01 逆向 flagfinder为.NET编译的PE文件&#xff0c;用dnSpy…

java 编译原理 字符串_Java编译原理(javac)

Java中的编译分为两个部分&#xff1a;源码文件编译成字节码文件(前端编译)字节码文件被虚拟机加载以后编译成机器码(后端编译)对于开发来说接触的一般都是第一个步骤也就是源码编译成字节码文件(class文件)&#xff0c;第二个步骤开发几乎不会接触&#xff0c;因为这是虚拟机在…

sql2012一段时间无法连接报53错误

2019独角兽企业重金招聘Python工程师标准>>> 解决方案 在sqlserver网络配置下的msqlserver协议下改将ip3改成如下图所示 转载于:https://my.oschina.net/u/2511906/blog/840373