Dettagli dell'plugin di progresso del contenuto del blog in JavaScript

Prima parole

Recentemente sto rivedendo i miei blog, ma alcuni contenuti dei blog sono molto lunghi, tanto che non so quanto tempo ci vorrà per leggerli. In questo caso, c'è una sensazione di scoraggiamento. Ma, se fosse possibile fornire un plugin di progresso del contenuto del blog, che mostri la barra di progresso in base alla quantità di contenuto letto, in modo che si abbia un'idea della progressione del contenuto letto, si potrebbe calmarci e leggere un po' alla volta. Questo articolo illustrerà dettagliatamente l'implementazione del plugin di progresso del contenuto del blog

Dimostrazione degli effetti

Sia che si utilizzi la rotella del mouse, o trascinando la barra di scorrimento, o premendo il tasto spazio, ogni volta che si verifica l'operazione di scorrimento della pagina, viene attivata la variazione della barra di progresso del contenuto del blog in fondo alla pagina. Secondo la quantità di contenuto attualmente visualizzato, si calcola la proporzioni rispetto al contenuto totale del blog, e infine viene corrisposta alla larghezza della barra di progresso. Quando il mouse si muove all'interno della gamma della barra di progresso, viene visualizzata la percentuale di progresso corrente in numeri

Utilizzando il seguente codice, è possibile inserire il plugin di progresso nella pagina

Poiché la tabella dei contenuti e il progresso sono funzioni comuni, ho integrato la funzione di progresso nel plugin di generazione della tabella dei contenuti

Spiegazione del principio

L'argomento della barra di progresso è stato spiegato in modo chiaro e conciso, e la sua implementazione non è difficile. Quando si verifica l'evento di scorrimento, si calcolano due valori di altezza. Un valore H viene utilizzato per rappresentare la distanza dal fondo del contenuto del blog al margine superiore della pagina. Un valore h viene utilizzato per rappresentare la distanza dal fondo del contenuto del blog attualmente visibile nella finestra della pagina. Di conseguenza, il valore di proporzioni radio = h/H è la percentuale di progresso, che viene visualizzata come la variazione della larghezza della barra di progresso

Implementazione specifica

【1】Ottieni l'altezza totale del contenuto del blog H, come illustrato nell'immagine sottostante, il blog园 mette il contenuto del blog all'interno del div con id cnblogs_post_body, è sufficiente ottenere la sua altezza tramite scrollHeight. E questo valore è fisso e invariato, non è necessario ottenerlo di nuovo quando si verifica l'evento di scorrimento, può essere ottenuto una volta completata la caricamento della pagina

function addEvent(target,type,handler){
 if(target.addEventListener){
 target.addEventListener(type,handler,false);
 }else{
 target.attachEvent('on'+type,function(event){
  return handler.call(target,event);
 });
 }
}
var H;
addEvent(window,'load',function(){
 H = cnblogs_post_body.scrollHeight;
});

【2】Ottieni l'altezza del contenuto della pagina della finestra corrente visualizzata h, h è effettivamente la distanza di scorrimento della pagina h2

var h = document.documentElement.scrollTop || document.body.scrollTop;

【3】Implementazione della barra di progresso, attraverso H e h, si può calcolare il coefficiente di proporzioni radio = h/H. HTML5 ha aggiunto un controllo di tipo form progress, utilizzato per rappresentare il progresso di un compito o processo

[Attenzione] IE9- non supporta

Se il browser è IE9-, l'elemento progress viene degradato in un elemento div, è sufficiente visualizzare la percentuale

Imposta il valore massimo di progress a H e il valore di value a h. Aggiorna il valore di value quando viene attivato l'evento di scorrimento

addEvent(window,'scroll',function(){
 var h = document.documentElement.scrollTop || document.body.scrollTop;
 progress.value = h;
 var radio = (h/H >= 1) ? 1 : h/H;
 progress.innerHTML = progress.title = Math.floor(100*radio) + '%'; 
});

【4】Stili di configurazione

La stili della barra di progresso sono relativamente semplici, posizionata in modo fermo alla parte inferiore della pagina, e la larghezza è la stessa della finestra

.progress{
 position:fixed;
 left:0;
 right:0;
 bottom:0;
 width:100%;
 height:12px;
 text-align:center;
 font:12px/12px "宋体";
}

【5】动态脚本

Dato che verrà presentato come plugin, tutto il codice deve essere generato dinamicamente

var progress = document.createElement('progress');
progress.id = 'progress';
document.body.appendChild(progress);}}

插件代码

//事件兼容
function addEvent(target,type,handler){
 if(target.addEventListener){
 target.addEventListener(type,handler,false);
 }else{
 target.attachEvent('on'+type,function(event){
  return handler.call(target,event);
 });
 }
}
//生成元素
var progress = document.createElement('progress');
progress.id = 'progress';
progress.style.cssText = 'position:fixed;left:0;right:0;bottom:0;width:100%;height:12px;text-align:center;font:12px/12px "宋体";';
document.body.appendChild(progress);}}
//Calcolo di H
var H;
addEvent(window,'load',function(){
 progress.max = H = cnblogs_post_body.scrollHeight;
});
//Calcolo di h e radio
addEvent(window,'scroll',function(){
 var h = document.documentElement.scrollTop || document.body.scrollTop;
 progress.value = h;
 var radio = (h/H >= 1) ? 1 : h/H;
 progress.innerHTML = progress.title = Math.floor(100*radio) + '%'; 
});

Questo è tutto il contenuto dell'articolo, spero che il contenuto di questo articolo possa essere di qualche aiuto per la tua apprendimento o lavoro, e spero anche di ricevere più supporto per il tutorial di urla!

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright è della proprietà del rispettivo proprietario, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene il diritto di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale. Se trovi contenuti sospetti di violazione del copyright, invia un'e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito rimuoverà immediatamente il contenuto sospetto di violazione del copyright.

Corso di base