Ceci est le code source du plug-in de défilement JS que j'ai écrit pendant le nouvel an chinois. Je ne suis pas satisfait des résultats des résultats. Je suis retourné pour consolider et apprendre JS en profondeur. Ce plug-in a les aspects insatisfaisants suivants:
Pour les effets excessifs du contenu, vous pouvez vous référer à la barre de défilement dans la récente liste de session du client QQ. Son défilement est très fluide, tout simplement, il manque des effets de transition d'animation.
Pas une compatibilité parfaite, le style sous IE6 et 7 est encore un peu défectueux.
Le style est imparfait, comme la barre de défilement ne s'affiche que lorsque la souris est suspendue, et l'effet caché après le retrait n'est pas écrit.
La structure interne est déroutante et la structure du contenu doit être ajustée.
L'image de la barre de défilement n'est pas un artiste après tout, et c'est tellement dégoûtant de couper l'image par vous-même ...
Dans l'ensemble, il est toujours possible de regarder, mais il y a toujours un manque d'animation. Lorsque j'ai écrit ce plug-in, j'ai réalisé que mon plug-in utilisait des fonctions relativement basiques, j'ai donc pensé que ces fonctions devraient être encapsulées. J'ai récemment étudié JS en profondeur. Après avoir lu le livre à portée de main, je devrais commencer à écrire ce plug-in de fonction de base. Bien sûr, un moteur d'animation est indispensable. Sans plus tarder, le code source est ici (Remarque: La version complète de ce plug-in a des photos, veuillez télécharger le plug-in complet dans la pièce jointe à la fin de l'article):
CSS
La copie de code est la suivante:
.lf_scroll, .lf_scroll li {padding: 0; marge: 0; Style de liste: aucun; Font: 14px / 24px "Helvetica neue", Helvetica, Arial, 'Microsoft Yahei', Sans-Serif; Aperçu: aucun; }
.lf_scroll {curseur: pointeur; Largeur: 10px; Position: absolue; à droite: 0; en haut: 0; filtre: alpha (opacité = 50); -moz-opacité: 0,5; -Khtml-Opacity: 0,5; Opacité: 0,5; }
.lf_scrollfocus {filter: alpha (opacity = 100); -moz-opacité: 1; -Khtml-Opacity: 1; Opacité: 1; }
.lfs_top, .lfs_center, .lfs_bottom {background: url ('scrollbar.gif'); Largeur: 10px; hauteur: 10px; }
.lfs_top {fond de fond: 1px 0px; }
.lfs_center {Position d'arrière-plan: Centre 0; hauteur: 100px; }
.lfs_bottom {position arrière: -22px 0; }
/ * Config des développeurs * /
.RollDiv {hauteur: 100%; Largeur: 100%; débordement: caché; Position: relative; }
Javascrip
La copie de code est la suivante:
/ *
* Ce plugin est défini sur la barre de défilement de la page Web de simulation, veuillez insérer après la liaison pour les événements DOM
*
* Version des commentaires: 1.0.0
* Auteur: LinkFly
* Sina: Concentrez-vous sur un demi-siècle pour vous | cnblogs: http://www.cnblogs.com/silin6/ | Courriel: [email protected]
* Date: 2014-02-05 02:38:35
*
*
* Double licence sous les licences du MIT et GPL:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* /
(fonction (fenêtre, indéfinie) {
// Informations sur les paramètres de configuration
var config = {
Auto: vrai,
Hauteur: 'Auto',
Largeur: 'Auto'
};
var linkflyscroll = fonction (dom, options) {
/// <résumé>
/// 1: générer un objet de barre de défilement simulé, [veuillez lier les événements à l'objet spécifié après que cet objet fonctionne, sinon les événements que vous avez liés auparavant ne fonctionneront pas]
/// 1.1 - LinkFlyScroll (DOM) - Générez un objet de barre de défilement sur le DOM spécifié
/// 1.2 - LinkFlyScroll (Dom, Options) - Générez des objets de barre de défilement et fournissez une série de paramètres qui vous permettent de personnaliser le modèle de travail pour configurer l'objet.
/// </summary>
/// <param name = "dom" type = "string ou élément">
/// passe dans l'objet JS Dom, ou l'ID d'objet de la chaîne de type
/// </ param>
/// <param name = "Options" type = "JSON">
/// Personnalisez le modèle de travail de cet objet, avec les options suivantes:
/// [Facultatif] Auto (Boolean): Lorsque le contenu n'atteint pas la hauteur du conteneur, la barre de défilement sera-t-elle automatiquement cachée? La valeur par défaut est vraie (oui)
/// [facultatif] Hauteur (int ou chaîne): L'unité par défaut est PX, qui peut être int et chaîne. Si la valeur est automatique, la hauteur de CSS est utilisée par défaut.
/// [facultatif] Largeur (int ou chaîne): L'unité par défaut est PX, qui peut être int et chaîne. Si la valeur est automatique, la largeur de CSS est utilisée par défaut.
/// </ param>
/// <retourne type = "linkflyscroll" />
if (typeof (dom) === 'String') {
Dom = document.getElementById (DOM);
}
// Aucun Dom spécifié et aucun dom valide trouvé
// linkflyscroll (""), linkflyscroll (null), linkflyscroll (undefined)
if (! Dom ||! Dom.NodeType)
retourner ceci;
// Créer un objet conteneur
var scrolloBj = document.CreateElement ('div');
// L'objet de contenu est profondément cloné et ne contient pas d'événements, vous devez donc attendre que l'objet LinkFlyScroll soit fini avant de pouvoir lier des événements à l'objet DOM.
var cloneoBj = dom.clonenode (true);
scrolloBj.classname = 'rollDiv';
ScrolloBj.ApendChild (CloneObj);
// remplace l'objet actuel sur la page
dom.parentNode.replaceChild (ScrolloBj, Dom);
return new linkflyscroll.prototype.init (scrolloBj, options? Options: {});
};
linkflyscroll.prototype.init = fonction (dom, options) {
/// <résumé>
/// 1: Cet objet est l'objet réel. La façon particulière de travailler est qu'il peut y avoir des appels statiques et des appels instanciés de LinkFlyScroll
/// 1.1 - init (Dom, Options) - générer un objet de barre de défilement sur le DOM spécifié
/// </summary>
/// <param name = "dom" type = "élément">
/// objet DOM
/// </ param>
/// <param name = "Options" type = "JSON">
/// Personnalisez le modèle de travail de cet objet, avec les options suivantes:
/// [Facultatif] Auto (Boolean): Lorsque le contenu n'atteint pas la hauteur du conteneur, la barre de défilement sera-t-elle automatiquement cachée? La valeur par défaut est vraie (oui)
/// [facultatif] Hauteur (int ou chaîne): L'unité par défaut est PX, qui peut être int et chaîne. Si la valeur est automatique, la hauteur de CSS est utilisée par défaut.
/// [facultatif] Largeur (int ou chaîne): L'unité par défaut est PX, qui peut être int et chaîne. Si la valeur est automatique, la largeur de CSS est utilisée par défaut.
/// </ param>
/// <retourne type = "linkflyscroll" />
/ *
* Cet objet contient les propriétés suivantes:
* ISDRAG: La barre de défilement est-elle traînée
* StartTop: (fonctionnement) barre de défilement Start Recrolling Position
* endtop: (fonctionnement) barre de défilement Position de défilement
* TOPLIMIT: Position de limite supérieure de la barre de défilement
* Bottom Limit: la position limite au bas de la barre de défilement
* Contexte: contenu DOM
* ScrollRadix: Cardinalité de défilement
* cible: conteneur DOM
* /
// L'actuel cet objet, afin d'empêcher ce pointeur de changer fréquemment dans l'environnement (par exemple, lors des événements de liaison), enregistrez l'objet actuel.
var currscroll = this;
// domelement
if (dom.nodetype) {
// Enregistrer le conteneur et le contenu DOM
currscroll.target = dom;
currscroll.context = dom.firstchild;
// fusionner les paramètres de configuration
currscroll.options = tool.extend (config, options);
if (currscroll.options.width! == 'auto') {
dom.style.width = tool.convertValue (currscroll.options.width);
}
if (currscroll.options.height! == 'auto') {
dom.style.height = tool.convertValue (currscroll.options.height);
}
// trouver un dom valide
while (currscroll.context.nodetype! = 1) {
currscroll.context = currscroll.context.nextsibling;
}
// Créer des barres de défilement DOM
currscroll.scrollul = document.CreateElement ('ul');
currscroll.scrollUl.classname = 'lf_scroll';
currscroll.scrollul.appendChild (Tool.SetClass ('li', 'lfs_top'));
currscroll.scrollul.appendChild (Tool.SetClass ('li', 'lfs_center'));
currscroll.scrollul.appendChild (Tool.SetClass ('li', 'lfs_bottom'));
currscroll.context.style.position = 'relative';
// présente sur la page avant de pouvoir lire les données de localisation
Dom.ApendChild (Currscroll.Scrollul);
this.change ();
tool.addscrolllevent (currscroll.context, fonction (e) {
// Binding Mouse Wheel Event, unité de défilement 3px
if (e.wheel> 0) {// La roue de défilement fait défiler vers le haut
var currtop = currscroll.endtop - = 3;
currscroll.scrrollevent.call (Currscroll, currtop);
} else {// La roue de défilement fait défiler vers le bas
var currtop = currscroll.endtop + = 3;
currscroll.scrrollevent.call (Currscroll, currtop);
}
});
// Le texte interdit est sélectionné lors de la traînée de TODO
// Cliquez sur l'événement sous la souris et vous devez déterminer s'il s'agit d'un clic gauche. Actuellement, le clic droit réalisera également le défilement de défilement.
Tool.Addevent (Currscroll.Scrollul, «Mousedown», fonction (e) {
Mousedown.Call (Currscroll, E);
});
// ajouter des événements pour implémenter la surveillance du corps pour une meilleure expérience utilisateur
Tool.Addevent (document.body, 'MouseMove', fonction (e) {
if (currscroll.isdrag) {
// Obtenez la position actuelle de la souris
var position = tool.getMouspos (e);
// la position supérieure de la barre de défilement actuelle
var currtop = (currscroll.endtop + position.y - currscroll.starttop);
// L'appel est de faire en sorte que ce pointeur pointe avec précision cet objet de travail
currscroll.scrrollevent.call (Currscroll, currtop);
}
retourne false;
});
// Ajouter un événement de libération de souris et écouter sur le corps afin de capturer avec précision l'événement de sortie
Tool.Addevent (document.body, 'MouseUp', function () {
MouseUp.Call (Currscroll, []);
});
var mousdown = fonction (e) {
/// <résumé>
/// 1: Événement de presse de souris
/// 1.1 - MousDown (E) - Événement Mousedown dans la presse à défilement
/// </summary>
/// <param name = "e" type = "Event">
/// Objet de l'événement
/// </ param>
/// <retourne type = "linkflyscroll" />
currscroll.isdrag = true;
// Obtenez la position actuelle de la souris Y
currscroll.starttop = tool.getMouspos (e) .y;
tool.addclass (currscroll.scrollul, 'lf_scrollfocus');
retourne false;
};
var muouseUp = function () {
/// <résumé>
/// 1: événement de sortie de la souris
/// 1.1 - MOUSEUP () - MOUSEUP () - Relexez l'événement de barre de défilement dans la barre de défilement
/// </summary>
/// <retourne type = "linkflyscroll" />
currscroll.isdrag = false;
currscroll.endtop = currscroll.scrollul.style.top? parseInt (currscroll.scrolllul.style.top): 0;
Tool.RemoveClass (currscroll.scrollul, 'lf_scrollfocus');
retourne false;
};
currscroll.scrollevent = fonction (currtop) {
/// <résumé>
/// 1: Événement de défilement (noyau), il suffit de passer les coordonnées qui doivent être défilées (haut de la barre de défilement)
/// 1.1 - Scrollevent (curtop) - Événement de défilement de base
/// </summary>
/// <param name = "currtop" type = "int">
/// La valeur supérieure du haut de la barre de défilement provient de la couche précédente du conteneur
/// </ param>
/// <retourne type = "void" />
if (curtop <= currscroll.toplimit || curtop <0) {// limite supérieure
curtop = currscroll.toplimit;
} else if (curtop> = currscroll.bottomlimit) {// limite inférieure
curtop = currscroll.bottomlimit;
}
// Effet de décalage de la barre de défilement
currscroll.scrollul.style.top = currtop + 'px';
var temptop = paSeInt (currscroll.context.style.top? currscroll.context.style.top: 0);
// Code de débogage
// document.getElementById ('PostionInfo'). innerHtml = 'currtop:' + currtop + 'Cardinalité de défilement:' + currscroll.scrollradix + 'bottomlimit:' + currscroll.bottomlimit + 'endtop:' + currscroll.endTop + 'startop:' + currscroll.start. + "OffsetTop:" + currscroll.scroll.offsettop + "Compute:" + (curtop * currscroll.scrollradix * -1) + 'px';
// code texte
// Contenu défilement: le haut de la barre de défilement actuel * La cardinalité prend un nombre négatif
currscroll.context.style.top = currtop * currscroll.scrollradix * -1 + 'px';
};
retour currscroll;
};
};
linkflyscroll.prototype.init.prototype.change = function () {
/// <résumé>
/// 1: Changer la fonction du contenu de la barre de défilement
/// 1.1 - change () - Cette fonction représente les données qui rafraîchissent cet objet de barre de défilement. Dans certains cas, les données du contenu changent constamment. Vous pouvez appeler cette fonction pour actualiser les données de l'objet de barre de défilement actuel.
/// </summary>
/// <retourne type = "linkflyscroll" />
/ *
* Les propriétés contenues dans LinkFlyScroll sont principalement initialisées ou redéfinies dans cette fonction:
* ISDRAG: La barre de défilement est-elle traînée
* StartTop: (fonctionnement) barre de défilement Start Recrolling Position
* endtop: (fonctionnement) barre de défilement Position de défilement
* TOPLIMIT: Position de limite supérieure de la barre de défilement
* Bottom Limit: la position limite au bas de la barre de défilement
* Contexte: contenu DOM
* ScrollRadix: Cardinalité de défilement
* cible: conteneur DOM
* /
// réinitialiser ou lire une série de données
var currscroll = this;
currscroll.isdrag = false,
currscroll.starttop = 0,
currscroll.endtop = (currscroll.scroll.style.top? ParseInt (currscroll.scrolllul.style.top): 0),
currscroll.toplimit = currscroll.target.scrolltop,
currscroll.bottomlimit = currscroll.target.clientheight,
currscroll.scrollradix = 10;
// Obtenez la hauteur de la barre de défilement: hauteur du contenu * (hauteur du conteneur / hauteur du contenu = conteneur en pourcentage de contenu)
var scrollpx = currscroll.target.clientHeight * (currscroll.target.clientheight / currscroll.context.offsetheight);
// Hauteur de la barre de défilement
currscroll.scrollul.childnodes [1] .style.height = scrollpx + 'px';
if (currscroll.context.clientheight <= currscroll.target.clientHeight && currscroll.options.auto) {
currscroll.scrollul.style.display = 'Aucun';
} autre {
currscroll.scrollul.style.display = 'block';
// Lorsque la barre de défilement s'affiche, corrigez les données de position maximale
currscroll.bottomlimit - = currscroll.scrollul.offsetheight;
}
// Définissez la cardinalité de défilement de la barre de défilement (la barre de défilement ne fait pas défiler 1PX Pixel de défilement de contenu): (hauteur du contenu - hauteur du conteneur [car le conteneur actuel a été affiché pour un écran]) / dessus de la barre de défilement (la barre de défilement est vide et peut être défilée)
currscroll.scrollradix = (currscroll.context.offsetheight - currscroll.target.clientheight) / currscroll.bottomlimit;
retour currscroll;
};
linkflyscroll.prototype.init.prototype.roll = function (value) {
/// <résumé>
/// 1: Méthode de décalage de la barre de défilement
/// 1.1 - Roll (valeur) - Méthode de défilement de la barre de défilement
/// </summary>
/// <param name = "valeur" type = "int">
/// pourcentage des cibles de défilement
/// </ param>
/// <retourne type = "linkflyscroll" />
var currscroll = this;
if (typeof (valeur)! == 'nombre') {
retour currscroll;
}
var currtop = (currscroll.bottomlimit - currscroll.toplimit) * valeur / 100;
currscroll.scrolllevent (currtop);
currscroll.endtop = currtop;
retour currscroll;
};
/ *
* Outils
* /
var outil = {
setClass: function (élément, className) {
/// <résumé>
/// 1: Définissez l'attribut de classe du nœud d'élément
/// 1.1 - setClass (élément, className) - Définissez l'attribut de classe du nœud d'élément. S'il n'y a pas de tel nœud, créez le nœud et renvoyez l'objet de nœud modifié
/// </summary>
/// <param name = "élément" type = "élément ou string">
/// Créez le nœud en passant dans la chaîne, sinon modifiez le nœud
/// </ param>
/// <param name = "classname" type = "string">
/// Nom de la classe
/// </ param>
/// <retourne type = "élément" />
if (typeof element === 'string') {
élément = document.CreateElement (élément);
}
element.className = className;
élément de retour;
},
HasClass: fonction (élément, className) {
/// <résumé>
/// 1: déterminer si l'élément a une classe
/// 1.1 - Hasclass (élément, className) - détermine si l'élément a une classe, des exceptions dans l'entreprise (en pratique, aucune situation de ce type), la classe a une vraie, sinon elle renvoie faux
/// </summary>
/// <param name = "élément" type = "élément ou string">
/// objet de nœud
/// </ param>
/// <param name = "classname" type = "string">
/// Nom de la classe
/// </ param>
/// <retourne type = "élément" />
if (! element || element.nodeType! == 1) // Laissez l'exception passer, et aucun traitement n'est effectué à l'extérieur
Retour Vrai;
var elementClassName = element.className;
if (elementClassName.length <1) {
retourne false;
}
if (elementClassName == className || elementClassName.match (new regexp ("(^ | // s)" + classname + "(// s | $)"))) {
Retour Vrai;
}
retourne false;
},
addClass: function (élément, classname) {
/// <résumé>
/// 1: [Ajouter] Classe pour l'élément
/// 1.1 - addClass (élément, className) - Ajoutez à l'élément et renvoyez la classe modifiée
/// </summary>
/// <param name = "élément" type = "élément ou string">
/// objet de nœud
/// </ param>
/// <param name = "classname" type = "string">
/// Nom de la classe
/// </ param>
/// <retourne type = "élément" />
if (! tool.hasclass (élément, className)) {
if (element.classname.length <1) {
element.className = className;
} autre {
element.classname + = '' + className;
}
}
élément de retour;
},
reposovelass: function (élément, className) {
/// <résumé>
/// 1: supprimer la classe d'élément
/// 1.1 - addClass (élément, className) - supprimer la classe pour l'élément et renvoyer la classe modifiée
/// </summary>
/// <param name = "élément" type = "élément ou string">
/// objet de nœud
/// </ param>
/// <param name = "classname" type = "string">
/// Nom de la classe
/// </ param>
/// <retourne type = "élément" />
if (tool.hasclass (élément, className)) {
var reg = new regexp ("(^ | // s)" + classname + "(// s | $)");
element.classname = element.classname.replace (reg, '');
}
élément de retour;
},
CSS: fonction (élément, clé) {
/// <résumé>
/// 1: Obtenez la valeur d'attribut spécifiée par l'élément CSS
/// 1.1 - CSS (élément, nom de classe) - Obtenez la valeur d'attribut spécifiée par l'élément CSS
/// </summary>
/// <param name = "élément" type = "élément ou string">
/// objet de nœud
/// </ param>
/// <param name = "key" type = "string">
/// l'attribut CSS pour obtenir
/// </ param>
/// <retourne type = "String" />
return elem.currentStyle? element.currentStyle [key]: document.defaultView.getCompuledStyle (élément, false) [key];
},
addEvent: fonction (élément, type, fn) {
/// <résumé>
/// 1: Ajouter les événements aux éléments
/// 1.1 - CSS (élément, type, fn) - Ajouter les événements à l'élément, ce point à la source d'événement dans la fonction
/// </summary>
/// <param name = "élément" type = "élément ou string">
/// objet de nœud
/// </ param>
/// <param name = "type" type = "string">
/// Ajout du nom de l'événement, sans caractères sur
/// </ param>
/// <param name = "fn" type = "fonction">
/// Objet de l'événement
/// </ param>
/// <retourne type = "void" />
if (element.attachevent) {
élément ['e' + type + fn] = fn;
élément [type + fn] = fonction () {élément ['e' + type + fn] (window.event); }
element.attachevent ('on' + type, élément [type + fn]);
} else if (element.addeventListener) {
element.addeventListener (Type, FN, false);
}
},
// retireEvent: fonction (élément, type, fn) {
// /// <résumé>
// /// 1: supprimer les événements pour les éléments, cette fonction n'a pas été utilisée
// /// 1.1 - REVOVEEVENT (élément, type, fn) - Supprimer l'événement pour l'élément
// /// </summary>
// /// <param name = "élément" type = "élément ou string">
// /// objet de nœud
// /// </ param>
// /// <param name = "type" type = "String">
// /// Nom de l'événement supprimé
// /// </ param>
// /// <param name = "key" type = "string">
// /// Nom de la fonction de l'événement supprimé
// /// </ param>
// /// <returns type = "void" />
// if (element.detachevent) {
// élément.DetAcEvent ('on' + type, élément [type + fn]);
// élément [type + fn] = null;
//} else if (element.reMoveEventListener) {
// élément.reMoveEventListener (Type, fn, false);
//}
//},
AddScrOllevent: fonction (élément, fn) {
/// <résumé>
/// 1: Événement de scrollevent
/// 1.1 - Ajouter un élément de scrollevent à l'élément (événement spécial, événement de défilement de souris sur l'élément)
/// </summary>
/// <param name = "élément" type = "élément ou string">
/// nœud d'élément
/// </ param>
/// <param name = "fn" type = "fonction">
/// Méthode d'événement
/// </ param>
/// <retourne type = "void" />
var bindscrollfn = fonction (e) {
E = E || window.event;
// juge la direction de défilement de la roue de défilement: Firefox est différent des autres navigateurs
e.wheel = (e.wheeldelta? e.wheeldelta: -e.detail)> 0? 1: -1; // juge la roue de souris inversée par l'événement, 1 est vers le haut, et -1 est à la baisse
// bloque le comportement par défaut du navigateur
if (e.PreventDefault) {// ff
E.PreventDefault ();
} autre {
e.reTurnValue = false; // c'est-à-dire
}
fn.Call (élément, e);
}
if (document.addeventListener) {
// ff
element.addeventListener («Dommesescroll», bindscrollfn, false);
// W3C
element.adDeventListener ('Mousewheel', bindscrollfn, false);
} else // ie
{
element.Attachevent ('onMousewheel', bindscrollfn);
}
},
getEvent: function () {
/// <résumé>
/// 1: Obtenez un objet d'événement
/// 1.1 - getEvent () - Obtenez un objet d'événement sans paramètres, tandis que les compatibilités gèrent IE et FF
/// </summary>
/// <retourne type = "Event" />
if (document.all) {
return window.event;
}
func = getEvent.Caller;
while (func! = null) {
var arg0 = func.Arguments [0];
if (arg0) {
if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof (arg0) == "objet" && arg0.preventdefault && arg0.stoppropagation)) {
retour arg0;
}
}
func = func.Caller;
}
retourner null;
},
getMouspos: fonction (ev) {
/// <résumé>
/// 1: Obtenez les coordonnées actuelles de la souris
/// 1.1 - GetMousPos (EV) - Obtenez les coordonnées actuelles de la souris, le traitement de la compatibilité et le format d'objet renvoyé: {x: coordonnées X de souris, y: coordonnées de souris y}
/// </summary>
/// <param name = "ev" type = "Event">
/// Objet de l'événement de l'événement
/// </ param>
/// <retourne type = "JSON" />
if (! ev) {
ev = currscroll.getEvent ();
}
if (ev.pagex || ev.pagey) {
retour {
x: ev.pagex,
y: ev.pagey
};
}
if (document.DocumentElement && document.DocumentElement.ScrollTop) {
retour {
x: ev.clientx + document.DocumentElement.Scrollleft - document.DocumentElement.ClientLeft,
y: ev.clienty + document.DocumentElement.ScrollTop - document.DocumentElement.ClientTop
};
}
else if (document.body) {
retour {
x: ev.clientx + document.body.scrollleft - document.body.clientleft,
y: ev.clienty + document.body.scrolltop - document.body.clienttop
};
}
},
extension: fonction (oldobj, newobj) {
/// <résumé>
/// 1: fusionner deux objets
/// 1.1 - Extension (OldObj, Newobj) - Fusionner deux objets et renvoyer l'objet fusionné, l'implémenter en clone, il n'aura donc aucun impact sur les deux objets
/// </summary>
/// <param name = "oldobj" type = "objet">
/// objet a à fusionner, qui est utilisé comme objet de base, écrase l'attribut du même nom du nouvel objet dans l'objet de base
/// </ param>
/// <param name = "newoBj" type = "objet">
/// objet B à fusionner
/// </ param>
/// <retourne type = "objet" />
var tempobj = tool.clone (oldobj);
pour (clé var dans newoBj) {
if (newoBj.HasownProperty (key) &&! tempobj.hasownproperty (key)) {
tempobj [key] = newObj [key];
}
}
retour tempobj;
},
clone: fonction (obj) {
/// <résumé>
/// 1: cloner un objet
/// 1.1 - clone (obj) - clone un objet et renvoyer le nouvel objet cloné. Le prototype de l'objet est l'objet cloné
/// </summary>
/// <param name = "obj" type = "objet">
/// l'objet à clone
/// </ param>
/// <retourne type = "objet" />
fonction clone () {}
Clone.prototype = obj;
var newoBj = new Clone ();
pour (clé var dans newoBj) {
if (typeof newoBj [key] == "objet") {
newObj [key] = tool.clone (newObj [key]);
}
}
retourner newoBJ;
},
convertValue: fonction (valeur) {
/// <résumé>
/// 1: convertir la valeur en une valeur valide
/// 1.1 - ConvertValue (valeur) - Convertir la valeur CSS configurée par JSON en une valeur valide, veuillez vous assurer que la valeur de la valeur n'est pas "automatique"
/// </summary>
/// <param name = "valeur" type = "objet">
/// la valeur à convertir
/// </ param>
/// <retourne type = "objet" />
var reg = / ^ / d + $ / g;
if (typeof (value) === 'nombre' || reg.test (valeur)) {
valeur de retour + 'px';
} autre
valeur de retour;
}
};
// Inscrivez-vous à la fenêtre
window.linkflyscroll = linkflyscroll;
// Inscrivez-vous dans la fenêtre.
if (! window.so) {
window.so = {};
}
window.so.scroll = window.linkFlyScroll;
})(fenêtre);
Exemple de code
La copie de code est la suivante:
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<Title> </Title>
<link href = "linkflyscroll / linkflyrollcss.css" rel = "stylesheet" type = "text / css" />
<script src = "linkflyscroll / linkflyscroll-1.0.0.js" type = "text / javascript"> </ script>
<script type = "text / javascript">
window.onload = function () {
var config = {
auto: vrai, // lorsque le contenu n'atteint pas la hauteur du conteneur, la barre de défilement sera automatiquement cachée
hauteur: '100', // la hauteur de travail de l'objet de la barre de défilement (la barre de défilement sera affichée si elle dépasse cette hauteur), Auto obtient la hauteur actuelle de l'objet
Largeur: «auto» //
};
var scrolloBj = so.scroll ('obj', config);
// scrollobj.change (); // Lorsque le contenu de la barre de défilement change, l'affichage de la barre de défilement doit être rafraîchi, alors cette méthode est appelée
// scrollobj.roll (valeur); // positionnez la barre de défilement à un certain point, la valeur est le pourcentage par rapport à l'objet de barre de défilement
};
</cript>
</ head>
<body>
<div id = "obj">
<div>
À l'heure actuelle, un nouveau "style de mode" émerge dans le domaine de la gestion d'entreprise, et certaines entreprises géantes "se sont" diminuées "pour elles-mêmes et se transforment en entreprises plus intelligentes et plus agiles. Il est entendu qu'Oracle Software change de plus en plus les principaux coûts de maintenance de ses clients pour les consultants et les fournisseurs tiers.
"En Chine, 90% des activités d'Oracle sont effectuées par le biais de ces partenaires. En outre, pour assurer davantage les revenus d'Oracle, le PDG Ellison a également acheté une petite île à Hawaï", a déclaré Craig Guarente.
En tant que vice-président mondial, Guarente est très conscient des stratégies d'Oracle. Guarente possède 16 ans d'expérience professionnelle et possède une expérience riche en gestion des contrats, en gestion de licences logicielles et audit logiciel. Après avoir quitté Oracle en 2011, il a rejoint Palisade, dont l'activité principale est d'aider les clients d'Oracle à fournir des contrats de logiciels, une intervention d'audit et une "optimisation".
Guarente a déclaré que les affaires de Palisade se développent très rapidement. En tant qu'organisation tierce, Palisade aide les clients à gagner de grandes commandes car ils sont plus proches du marché et peuvent comprendre plus précisément les besoins des utilisateurs.
De manière générale, les sociétés de conseil aident les clients à trier leurs besoins réels et à la valeur que le logiciel lui-même peut fournir. Guarente a donné une explication détaillée à travers des opérations pratiques. Par exemple, «Si vous souhaitez créer un nouveau centre de données, lancez un nouveau plan de reprise après sinistre ou si vous souhaitez entrer dans le cloud, une entreprise tierce développera d'abord une carte de planification et finira par la mettre en œuvre pour atteindre l'entreprise de l'utilisateur. Les administrateurs de la base de données peuvent diagnostiquer les problèmes de base de données via des rapports de référentiel de chargement automatique (AWR).
Ces dernières années, avec la montée en puissance de la vague d'audit des logiciels, de nombreuses entreprises installent des outils de gestion des actifs logiciels pour déterminer quels logiciels ils utilisent, combien de temps il peut durer et combien de personnes dans une entreprise l'utilisent. Mais l'analyste de direction, Hegedus, a déclaré: "Aucun outil ne peut comprendre avec précision les règles d'entreprise, en particulier les applications de produits d'Oracle, et des organisations tierces professionnelles sont nécessaires pour aider les utilisateurs à comprendre les règles logicielles."
Alors, comment puis-je corriger les applications logicielles d'Oracle? Le président d'Oracle, Mark Hurd, a déclaré la semaine dernière qu'au début des demandes d'entreprise, les institutions tierces devraient être définies comme des supporters de services, afin que les entreprises puissent obtenir des réparations de correctifs gratuites et d'autres soutiens à l'avenir, plutôt que d'acheter simplement des droits de propriété intellectuelle du produit. De plus, les entreprises devraient utiliser efficacement les consultants pour soutenir la première étape du contrôle des coûts lors de la compréhension du logiciel que l'entreprise utilise et de l'accord. Ne laissez pas aveuglément le fournisseur de logiciels et achetez un logiciel en fonction du processus de vos prédictions et de vos suppositions.
</div>
</div>
</docy>
</html>
Ce qui précède est l'intégralité du contenu de cet article, et l'explication est très détaillée. J'espère que vous l'aimez.