Shulou(Shulou.com)06/02 Report--

This article mainly introduces the js top progress bar minimum plug-in nanobar.js how to achieve, the article is very detailed, has a certain reference value, interested friends must read it!

There are four or five progress bar plug-ins at the top of the page, the basic principle is to dynamically create an element, and then set its width to achieve animation, when the width growth reaches the specified position, remove it.

/ * http://nanobar.micronube.com/ | | https://github.com/jacoborus/nanobar/ MIT LICENSE * / (function (root) {'use strict' / / container styles var css =' .nanobar {width:100%;height:4px;z-index:9999;top:0} .bar {width:0;height:100%;transition:height .3s) Background:#000}'/ / add required css in head div function addCss () {var s = document.getElementById ('nanobarcss') / / check whether style tag is already inserted if (s = null) {s = document.createElement (' style') s.type = 'text/css' s.id =' nanobarcss' document.head.insertBefore (s) Document.head.firstChild) / / the world if (! s.styleSheet) return s.appendChild (document.createTextNode (css)) / / IE s.styleSheet.cssText = css}} function addClass (el Cls) {if (el.classList) el.classList.add (cls) else el.className + =''+ cls} / / create a progress bar / / this will be destroyed after reaching 100% progress function createBar (rm) {/ / create progress element var el = document.createElement ('div'), width = 0, here = 0, on = 0, bar = {el: el Go: go} addClass (el, 'bar') / / animation loop function move () {var dist = width-here if (dist)

-0.1) {place (here) on = 0 if (width = = 100) {el.style.height = 0 setTimeout (function () {rm (el)}, 300)}} else {place (width-dist / 4) setTimeout (go 16)} / / set bar width function place (num) {width = num el.style.width = width +'%'} function go (num) {if (num > = 0) {here = num if (! on) {on = 1 move ()} else if (on) {move ( )} return bar} function Nanobar (opts) {opts = opts | | {} / / set options var el = document.createElement ('div') ApplyGo, nanobar = {el: el Go: function (p) {/ / expand bar applyGo (p) / / create new bar when progress reaches 100 if (p = 100) {init ()} / / remove element from nanobar container function rm (child) {el.removeChild (child)} / create and insert progress var in nanobar container function init () {var bar = createBar (rm) el.appendChild (bar.el) applyGo = bar.go} addCss () addClass (el 'nanobar') if (opts.id) el.id = opts.id if (opts.classname) addClass (el, opts.classname) / / insert container if (opts.target) {/ / inside a div el.style.position =' relative' opts.target.insertBefore (el) Opts.target.firstChild)} else {/ / on top of the page el.style.position = 'fixed' document.getElementsByTagName (' body') [0] .appendChild (el)} init () return nanobar} if (typeof exports = 'object') {/ / CommonJS module.exports = Nanobar} else if (typeof define =' function' & & define.amd) {/ / AMD. Register as an anonymous module. Define ([], function () {return Nanobar})} else {/ / Browser globals root.Nanobar = Nanobar}} (this))

In general, the plug-in has several features:

Dom+js native selector

Support for modularization

Es5+IIFE

No semicolons are needed.

Look at it in detail:

At the beginning of the program, the necessary Css attributes are defined, including two class, bar (body) and Nanobar (container):

.nanobar {width:100%;height:4px;z-index:9999;top:0} .bar {width:0;height:100%;transition:height .3s; background:#000}

In terms of css content, only .bar has the transition setting of transition:height .3s, and the time of height transition should be when it is deleted. There should be no animation effect in the horizontal, but from the official website demonstration effect, the horizontal still has a certain animation effect, this problem will be mentioned below.

Constructor NanoBar

NanoBar accepts an opts as a parameter. The details of opts recorded in the document are as follows:

The name function id specifies the idclassname of the nanobar specifies the classtarget of the nanobar and specifies the location of the Nanobar, which is generally not available for making the top progress bar. It is worth mentioning that this parameter is of type DOM Element, and you must assign a value to it using methods such as document.getxxxxx.

First, three variables are declared:

The name describes el, which is the dynamically created element-an empty divapplyGo progress bar moving method nanobarnanobar object with neither ID nor Class, which will be returned as a result in the new constructor

Where nanobar contains these two elements:

The name describes how the dynamically created element go on el is open to the public. If the parameter is a numeric value, it must represent the actual physical units such as percentages rather than pixels.

The go processing here essentially calls applyGo, and applyGo must be undefined at this time, so applyGo actually assigns values elsewhere. The result of this processing is equivalent to a layer of encapsulation, hiding the internal actual go method content.

You can also find the easiest way to use nanobar:

Var nanobar = new Nanobar (); nanobar.go (80)

Next, you declare two internal functions that can access the three variables mentioned above:

Name function rm is used to delete the dynamically created element init initialization method after the progress is completed, which needs to be paid attention to.

Then there are some necessary treatments, which are made up of these three parts:

The addCss method adds nodes to the head node and fills in the css above.

Call the addClass method to create a container with the class name nanobar. It should be noted that compared with directly manipulating the new APIclassList in which HTML5 is called in the className method, it is as convenient as jquery's addClass and removeClass to add and delete the class of dom objects. For more information, please see here.

The next step is to process the opts parameter:

The main thing is to assign id and className to the el element, change the position of the container according to whether or not the parent container, that is, target, is specified, and eventually insert it into the corresponding location.

Let's take a look at the init () method:

All of the previous actions create a container called nanobar, and then it's time to create the bar body.

As you can see, the bar variable is still the same as nanobar, consisting of el and go, and the applyGo,el that go will eventually be assigned to the outer container will be inserted into the el of the outer container as a child element.

Thus, when go is called in the simplest way, the order is as follows:

Container nanobar.go = > applyGo = > Ontology bar.go

After calling the go method, why is there a certain animation effect horizontally?

Take a look at the action methods of nanobar: go, move, place

There are several controls:

The name function on is equivalent to Boolean flag, indicating whether the progress has been completed or not. The distance between dist and the end point of the here.

The actual processing flow can be expressed as follows:

The root causes of animation are as follows:

Subdivision of the remaining space by place (width-dist / 4)

58 followed by setTimeout (go,16), assuming that the x-axis is regarded as 16ms and the Y-axis as the length of each subdivision, you will get an image similar to log2x (the early trend is large, the late trend is stable, similar to the ease-out in the animation function).

The above is all the content of the article "how to implement the minimum plug-in nanobar.js on the top of the js progress bar". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.