Teilen

Autor：Eve Cole Aktualisierungszeit：2025-06-06 22:32:01

Dies ist der Quellcode des JS Scrolling Plug-In, das ich während des chinesischen Neujahrs geschrieben habe. Ich bin nicht mit den Ergebnissen der Ergebnisse zufrieden. Ich ging zurück, um zu konsolidieren und js ausführlich zu lernen. Dieses Plug-In hat die folgenden unbefriedigenden Aspekte:

Für übermäßige Auswirkungen des Inhalts können Sie in der letzten Sitzungsliste des QQ -Clients auf die Bildlaufleiste verweisen. Das Scrollen ist sehr glatt, einfach ausgedrückt, es fehlen Animationsübergangseffekte.

Keine perfekte Kompatibilität, der Stil unter IE6 und 7 ist immer noch ein bisschen fehlerhaft.

Der Stil ist unvollkommen, z.

Die interne Struktur ist verwirrend und die Inhaltsstruktur muss angepasst werden.

Das Scroll Bar -Bild ist doch kein Künstler, und es ist so ekelhaft, das Bild selbst zu schneiden ...

Insgesamt ist es immer noch möglich zu sehen, aber es gibt immer noch einen Mangel an Animation. Als ich dieses Plug-In schrieb, wurde mir klar, dass mein Plug-In einige relativ grundlegende Funktionen verwendete. Daher dachte ich, dass diese Funktionen eingekapselt werden sollten. Ich habe in letzter Zeit JS eingehend untersucht. Nachdem ich das vorliegende Buch gelesen habe, sollte ich mit dem Schreiben dieses grundlegenden Funktions-Plug-Ins beginnen. Natürlich ist eine Animations -Engine unverzichtbar. Ohne weiteres ist der Quellcode da (Hinweis: Die vollständige Version dieses Plug-Ins enthält Bilder, bitte laden Sie das komplette Plug-In im Anhang am Ende des Artikels herunter):

CSS

Die Codekopie lautet wie folgt:

.lf_scroll, .lf_scroll li {padding: 0; Rand: 0; Listenstil: Keine; Schriftart: 14px/24px "Helvetica Neue", Helvetica, Arial, 'Microsoft Yahei', sans-serif; Umriss: Keine; }

.lf_scroll {cursor: pointer; Breite: 10px; Position: absolut; Rechts: 0; Top: 0; Filter: Alpha (Opazität = 50); -moz-opacity: 0,5; -khtml-opacity: 0,5; Deckkraft: 0,5; }

.lf_scrollfocus {filter: alpha (opacity = 100); -moz-opacity: 1; -khtml-opacity: 1; Deckkraft: 1; }

.lfs_top, .lfs_center, .lfs_bottom {Hintergrund: url ('scrollBar.gif'); Breite: 10px; Höhe: 10px; }

.lfs_top {Hintergrundposition: 1px 0px; }

.lfs_center {Hintergrundposition: Center 0; Höhe: 100px; }

.lfs_bottom {Hintergrundposition: -22px 0; }

/*Entwicklerkonfiguration*/

.rolldiv {Höhe: 100%; Breite: 100%; Überlauf: versteckt; Position: Relativ; }

JavaScript

Die Codekopie lautet wie folgt:

* Dieses Plugin ist in der Simulations -Webseite Scroll -Leiste definiert. Bitte geben Sie nach der Bindung für DOM -Ereignisse ein

* Kommentarversion: 1.0.0

* Autor: Linkfly

* Sina: Konzentrieren Sie sich auf ein halbes Jahrhundert für Sie | cnblogs: http://www.cnblogs.com/silin6/ | E -Mail: [email protected]

* Datum: 2014-02-05 02:38:35

* Dual lizenziert unter den MIT- und GPL -Lizenzen:

* http://www.opensource.org/licenses/mit-license.php

* http://www.gnu.org/licenses/gpl.html

(Funktion (Fenster, undefiniert) {

// Konfigurationsparameterinformationen

var config = {

Auto: wahr,

Höhe: 'Auto',

Breite: 'Auto' '

};

var linkflyScroll = Funktion (DOM, Optionen) {

/// <summary>

/// 1: Generieren Sie ein simuliertes Scrollbar -Objekt, [bitte binden Sie Ereignisse an das nach diesem Objekt angegebene Objekt, andernfalls funktionieren die Ereignisse, die Sie zuvor gebunden sind, nicht funktionieren.

/// 1.1 - linkflyScroll (DOM) - Scrollbar -Objekt auf der angegebenen DOM generieren

/// 1.2 - LinkflyScroll (DOM, Optionen) - Generieren Sie Scrollbar -Objekte und geben Sie eine Reihe von Parametern an, mit denen Sie das Arbeitsmodell für die Konfiguration des Objekts anpassen können.

/// </summary>

/// <param name = "dom" type = "String oder Element">

/// In JS DOM -Objekt oder die Objekt -ID der Typ -Zeichenfolge übergeben

/// </param>

/// <param name = "options" type = "json">

/// das Arbeitsmodell dieses Objekts mit den folgenden Optionen anpassen:

/// [Optional] Auto (Boolean): Wenn der Inhalt nicht die Höhe des Containers erreicht, wird die Bildlaufleiste automatisch versteckt? Der Standard ist wahr (ja)

/// [Optional] Höhe (int oder String): Die Standardeinheit ist PX, die int und Zeichenfolge sein kann. Wenn der Wert automatisch ist, wird die Höhe von CSS standardmäßig verwendet.

/// [Optional] Breite (int oder Zeichenfolge): Die Standardeinheit ist PX, die int und Zeichenfolge sein kann. Wenn der Wert automatisch ist, wird die Breite von CSS standardmäßig verwendet.

/// </param>

/// <returns type = "linkFlyScroll"/>

if (typeof (dom) === 'String') {

DOM = document.GetElementById (DOM);

}

// Kein DOM Spezifiziert und kein gültiges DOM gefunden

// linkflyScroll (""), linkflyScroll (null), linkflyScroll (undefiniert)

if (! dom ||! dom.nodetype)

gib dies zurück;

// Containerobjekt erstellen

var scrollobj = document.createelement ('div');

// Das Inhaltsobjekt ist tief kloniert und enthält keine Ereignisse. Sie müssen also warten, bis das LinkflyScroll -Objekt beendet ist, bevor Sie Ereignisse an das DOM -Objekt binden können.

var kloneObj = dom.clonenode (true);

scrollobj.classname = 'rolldiv';

Scrollobj.Appendchild (CloneObj);

// Ersetzen Sie das aktuelle Objekt auf der Seite

Dom.Parentnode.replacechild (Scrollobj, Dom);

Neue linkflyScroll.Prototype.init (Scrollobj, Optionen? Optionen: {});

};

linkflyScroll.prototype.init = Funktion (DOM, Optionen) {

/// <summary>

/// 1: Dieses Objekt ist das reale Objekt. Die besondere Arbeitsweise besteht darin, dass es statische Anrufe und instanziierte Anrufe von LinkflyScroll geben kann

/// 1.1 - init (DOM, Optionen) - Scrollbar -Objekt auf dem angegebenen DOM generieren

/// </summary>

/// <param name = "dom" type = "element">

/// Dom -Objekt

/// </param>

/// <param name = "options" type = "json">

/// das Arbeitsmodell dieses Objekts mit den folgenden Optionen anpassen:

/// [Optional] Auto (Boolean): Wenn der Inhalt nicht die Höhe des Containers erreicht, wird die Bildlaufleiste automatisch versteckt? Der Standard ist wahr (ja)

/// [Optional] Höhe (int oder String): Die Standardeinheit ist PX, die int und Zeichenfolge sein kann. Wenn der Wert automatisch ist, wird die Höhe von CSS standardmäßig verwendet.

/// [Optional] Breite (int oder Zeichenfolge): Die Standardeinheit ist PX, die int und Zeichenfolge sein kann. Wenn der Wert automatisch ist, wird die Breite von CSS standardmäßig verwendet.

/// </param>

/// <returns type = "linkFlyScroll"/>

* Dieses Objekt enthält die folgenden Eigenschaften:

* ISDRAG: Wird die Scrollbar gezogen?

* StartTop: (Arbeiten) Scroll -Balken -Start -Scrolling -Position

* Endtop: (Arbeiten) Scroll -Balkend -Scroll -Position

* TopLimit: obere Grenzposition der Bildlaufleiste

* BottomLimit: Die Grenzposition am unteren Rand der Scrollstange

* Kontext: Inhalt Dom

* Scrollradix: Scrollenkardinalität Scrollen

* Ziel: Container Dom

// Der Strom dieses Objekts, um zu verhindern, dass dieser Zeiger in der Umgebung häufig ändert (beispielsweise beim Binden von Ereignissen), speichern Sie das aktuelle Objekt.

var currscroll = this;

// Domelement

if (dom.nodetype) {

// Container und Inhaltsdom speichern

CurrScroll.target = Dom;

CurrScroll.Context = Dom.Firstchild;

// Konfigurationsparameter zusammenführen

CurrScroll.Options = Tool.extend (config, Optionen);

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);

}

// ein gültiges DOM finde

while (currscroll.context.nodetype! = 1) {

CurrScroll.Context = CurrScroll.Context.NextSsibling;

}

// Scrollbar DOM erstellen

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äsentieren Sie auf der Seite, bevor Sie die Standortdaten lesen können

Dom.AppendChild (CurrScroll.Scrollul);

this.change ();

Tool.AddsCrollevent (CurrScroll.Context, Funktion (e) {

// Binden Sie Mausradereignis, 3px Scrolling -Einheit

if (e.wheel> 0) {// Das Bildlaufrad scrollt nach oben

var currtop = currScroll.endTop -= 3;

CurrScroll.scollevent.call (CurrScroll, Currtop);

} else {// Das Scroll -Rad rollt nach unten

var currtop = currScroll.endTop += 3;

CurrScroll.scollevent.call (CurrScroll, Currtop);

}

});

// Der verbotene Text wird beim Ziehen von Todo ausgewählt

// Klicken Sie auf das Ereignis unter der Maus und Sie müssen feststellen, ob es sich um ein linkes Klick handelt. Derzeit wird der Rechtsklick auch erkennen, dass das Scrollen von Todo scrollt.

Tool.AdDevent (Currscroll.Scrollul, 'MouseDown', Funktion (e) {

MouseDown.Call (Currscroll, e);

});

// Ereignisse hinzufügen, um die Überwachung auf Body für eine bessere Benutzererfahrung zu implementieren

Tool.AdDeVent (Dokument.body, 'Mousemove', Funktion (e) {

if (currscroll.isdrag) {

// Holen Sie sich die aktuelle Mausposition

var Position = Tool.getMousepos (e);

// Die aktuelle Spitzbalken -Top -Position

var currtop = (CurrScroll.endTop + Position.y - CurrScroll.StartTop);

// Anruf muss diesen Zeiger genau auf dieses Arbeitsobjekt hinweisen

CurrScroll.scollevent.call (CurrScroll, Currtop);

}

false zurückgeben;

});

// Fügen Sie ein Mausveröffentlichungsereignis hinzu und hören Sie sich den Körper an, um das Veröffentlichungsereignis genau zu erfassen

Tool.AdDeVent (document.body, 'mauseup', function () {

mausup.call (CurrScroll, []);

});

var mousedown = function (e) {

/// <summary>

/// 1: Mausdruckereignis

/// 1.1 - Mousedown (E) - Mousedown Event in der Scrollbar Press

/// </summary>

/// <param name = "e" type = "event">

/// Ereignisobjekt

/// </param>

/// <returns type = "linkFlyScroll"/>

CurrScroll.isdrag = true;

// Holen Sie sich die aktuelle Maus -Y -Position

CurrScroll.StartTop = Tool.getMousepos (e) .y;

Tool.AddClass (CurrScroll.Scrollul, 'lf_scrollfocus');

false zurückgeben;

};

var mauseup = function () {

/// <summary>

/// 1: Mausveröffentlichungsereignis

/// 1.1 - MouseUp () - MouseUp () - Release Scrollbar -Event in der Scrollbar Release

/// </summary>

/// <returns type = "linkFlyScroll"/>

CurrScroll.isdrag = false;

CurrScroll.endtop = CurrScroll.scrollul.style.top? ParseInt (CurrScroll.Scrollul.Style.top): 0;

Tool.removeclass (CurrScroll.scrollul, 'lf_scrollfocus');

false zurückgeben;

};

currScroll.scollevent = function (currtop) {

/// <summary>

/// 1: Scroll Event (CORE), geben Sie einfach die Koordinaten ein, die scrolliert werden müssen (Scroll -Balken -Oberseite)

/// 1.1 - Scrollevent (Currtop) - Core Scroll Event

/// </summary>

/// <param name = "currtop" type = "int">

/// Der oberste Wert der Oberseite der Bildlaufleiste stammt aus der vorherigen Schicht des Behälters

/// </param>

/// <returns type = "void"/>

if (currtop <= currScroll.toplimit || currtop <0) {// Top Limit

CurrTop = CurrScroll.Toplimit;

} else if (currtop> = currScroll.bottomlimit) {// untere Grenze

Currtop = CurrScroll.BottomLimit;

}

// Scrollbar -Offset -Effekt

CurrScroll.Scrollul.Style.top = Currtop + 'px';

var tempptop = parseInt (currscroll.context.style.top? currScroll.context.style.top: 0);

// Debuggcode

// document.getElementById ('positInfo'). Innerhtml = 'Currtop:' + currtop + 'Scrolling Cardinality:' + currscroll Currtop + "Offsettop:" + currScroll.scrollul.offsettop + "compute:" + (currtop * currScroll.scrollRadix * -1) + 'px';

// Textcode

// Content Scrolling: Die aktuelle Scroll -Balken -Oberseite* Die Kardinalität nimmt negative Anzahl an

CurrScroll.context.style.top = Currtop * CurrScroll.scrollRadix * -1 + 'px';

};

Return Currscroll;

};

linkflyScroll.prototype.init.prototype.change = function () {

/// <summary>

/// 1: Funktionen Sie die Funktion des Inhalts von Scroll -Balken ändern

/// 1.1 - Änderung () - Diese Funktion repräsentiert die Daten, die dieses Scrollbar -Objekt aktualisieren. In einigen Fällen ändert sich die Daten des Inhalts ständig. Sie können diese Funktion aufrufen, um die Daten in das aktuelle Scrollbar -Objekt zu aktualisieren.

/// </summary>

/// <returns type = "linkFlyScroll"/>

* Die in LinkflyScroll enthaltenen Eigenschaften werden in dieser Funktion hauptsächlich initialisiert oder neu definiert:

* ISDRAG: Wird die Scrollbar gezogen?

* StartTop: (Arbeiten) Scroll -Balken -Start -Scrolling -Position

* Endtop: (Arbeiten) Scroll -Balkend -Scroll -Position

* TopLimit: obere Grenzposition der Bildlaufleiste

* BottomLimit: Die Grenzposition am unteren Rand der Scrollstange

* Kontext: Inhalt Dom

* Scrollradix: Scrollenkardinalität Scrollen

* Ziel: Container Dom

// eine Datenreihe zurücksetzen oder lesen

var currscroll = this;

CurrScroll.isdrag = false,

CurrScroll.StartTop = 0,,

CurrScroll.endtop = (CurrScroll.scrollul.style.top? ParseInt (CurrScroll.Scrollul.style.top): 0),

CurrScroll.toplimit = CurrScroll.target.Scrolltop,

CurrScroll.bottomlimit = CurrScroll.target.ClientHeight,

CurrScroll.ScrollRadix = 10;

// Erhalten Sie die Höhe der Bildlaufleiste: Inhaltshöhe* (Containerhöhe/Inhaltshöhe = Container als Prozentsatz des Inhalts)

var scrollpx = currScroll.target.clientHeight * (currScroll.target.clientHeight / currScroll.Context.Offseteight);

// scroll stangenhöhe

CurrScroll.scrollul.childnodes [1] .Style.Height = scrollpx + 'px';

if (currScroll.context.clientHeight <= currscroll.target.clientHeight && currScroll.options.auto) {

CurrScroll.Scrollul.Style.Display = 'None';

} anders {

CurrScroll.Scrollul.Style.Display = 'Block';

// Wenn die Bildlaufleiste angezeigt wird, korrigieren Sie die maximalen Positionsdaten

CurrScroll.bottomlimit -= CurrScroll.Scrollul.Offseteight;

}

// Setzen Sie die Scrolling -Kardinalität der Bildlaufleiste (in der Scroll -Leiste werden 1PX -Inhalts -Scroll -Pixel nicht geprüft): (Inhaltshöhe - Containerhöhe [weil der aktuelle Container für einen Bildschirm angezeigt wurde])/Scroll -Balken oben (die Scrollleiste ist leer und kann scrolliert werden)

CurrScroll.scrollRadix = (CurrScroll.Context.Offseteight - CurrScroll.target.clientHeight) / CurrScroll.BottomLimit;

Return Currscroll;

};

linkflyScroll.prototype.init.prototype.roll = function (value) {

/// <summary>

/// 1: Scrollbar -Offset -Methode

/// 1.1 - Roll (Wert) - Scroll -Stange -Scrolling -Methode

/// </summary>

/// <param name = "value" type = "int">

/// Prozentsatz der Scrollenziele

/// </param>

/// <returns type = "linkFlyScroll"/>

var currscroll = this;

if (typeof (value)! == 'number') {

Return Currscroll;

}

var currtop = (currScroll.bottomlimit - CurrScroll.toplimit) * Wert / 100;

CurrScroll.scollevent (Currtop);

CurrScroll.endTop = Currtop;

Return Currscroll;

};

* Werkzeuge

var Tool = {

setClass: function (element, className) {

/// <summary>

/// 1: Setzen Sie das Klassenattribut des Elementknotens

/// 1.1 - setClass (Element, className) - Setzen Sie das Klassenattribut des Elementknotens. Wenn es keinen solchen Knoten gibt, erstellen Sie den Knoten und geben Sie das modifizierte Knotenobjekt zurück

/// </summary>

/// <param name = "element" type = "element oder string">

/// Erstellen Sie den Knoten, indem Sie in der Zeichenfolge übergeben. Andernfalls ändern Sie den Knoten

/// </param>

/// <param name = "className" type = "String">

/// Klassenname

/// </param>

/// <returns type = "element"/>

if (typeof element === 'String') {

element = document.createelement (Element);

}

element.className = className;

Rückgabeelement;

Hasclass: Funktion (Element, KlasseName) {

/// <summary>

/// 1: Bestimmen Sie, ob das Element eine Klasse hat

/// 1.1 - Hasclass (Element, ClassName) - bestimmt, ob das Element eine Klasse hat, Ausnahmen im Geschäft (im Grunde genommen keine solche Situation auftritt) und die Klasse eine wahre, ansonsten gibt es falsche zurück

/// </summary>

/// <param name = "element" type = "element oder string">

/// Knotenobjekt

/// </param>

/// <param name = "className" type = "String">

/// Klassenname

/// </param>

/// <returns type = "element"/>

if (! Element || element.nodetype! == 1) // Lassen

zurückkehren;

var elementclassName = element.className;

if (elementclassName.length <1) {

false zurückgeben;

}

if (elementclassName == className || elementclassName.match (neuer regexp ("(^| // s)" + className + "(// s | $)"))))) {

zurückkehren;

}

false zurückgeben;

AddClass: Funktion (Element, ClassName) {

/// <summary>

/// 1: [add] Klasse für Element

/// 1.1 - AddClass (Element, ClassName) - Gehen Sie an das Element an und geben Sie die geänderte Klasse zurück

/// </summary>

/// <param name = "element" type = "element oder string">

/// Knotenobjekt

/// </param>

/// <param name = "className" type = "String">

/// Klassenname

/// </param>

/// <returns type = "element"/>

if (! tool.hasclass (Element, className)) {

if (element.className.length <1) {

element.className = className;

} anders {

element.className + = '' + className;

}

Rückgabeelement;

removeclass: function (element, className) {

/// <summary>

/// 1: Die Klasse für Element entfernen

/// 1.1 - AddClass (Element, ClassName) - Die Klasse für Element entfernen und die geänderte Klasse zurückgeben

/// </summary>

/// <param name = "element" type = "element oder string">

/// Knotenobjekt

/// </param>

/// <param name = "className" type = "String">

/// Klassenname

/// </param>

/// <returns type = "element"/>

if (tool.hasclass (Element, className)) {

var reg = new regexp ("(^| // s)" + className + "(// s | $)");

element.className = element.className.replace (reg, '');

}

Rückgabeelement;

CSS: Funktion (Element, Schlüssel) {

/// <summary>

/// 1: Erhalten Sie den von Element CSS angegebenen Attributwert

/// 1.1 - CSS (Element, ClassName) - Erhalten Sie den nach Element CSS angegebenen Attributwert

/// </summary>

/// <param name = "element" type = "element oder string">

/// Knotenobjekt

/// </param>

/// <param name = "key" type = "string">

/// Das CSS -Attribut zu erhalten

/// </param>

/// <returns type = "String"/>

return element.currentStyle? element.currentStyle [Schlüssel]: document.defaultView.getComputedStyle (Element, False) [Schlüssel];

AddEvent: Funktion (Element, Typ, fn) {

/// <summary>

/// 1: Ereignisse an Elemente anhängen

/// 1.1 - CSS (Element, Typ, FN) - Anhängen Ereignisse an das Element, diesen Punkt an die Ereignisquelle in der Funktion

/// </summary>

/// <param name = "element" type = "element oder string">

/// Knotenobjekt

/// </param>

/// <param name = "type" type = "String">

/// Ereignisname ohne Zeichen auf Anhängen

/// </param>

/// <param name = "fn" type = "function">

/// Ereignisobjekt

/// </param>

/// <returns type = "void"/>

if (element.attachEvent) {

Element ['e' + Typ + fn] = fn;

element [type + fn] = function () {element ['e' + type + fn] (window.event); }

Element.attachEvent ('on' + Typ, Element [Typ + fn]);

} else if (element.adDeVentListener) {

Element.AdDeVentListener (Typ, fn, false);

}

// REMENEDEVENT: Funktion (Element, Typ, fn) {

// /// <summary>

// /// 1: Ereignisse für Elemente löschen, wurde diese Funktion nicht verwendet

// /// 1.1 - removeEvent (Element, Typ, FN) - Ereignis für Element entfernen

// /// </summary>

// /// <param name = "element" type = "element oder string">

// /// Knotenobjekt

// /// </param>

// /// <param name = "type" type = "string">

// /// gelöschter Ereignisname

// /// </param>

// /// <param name = "key" type = "string">

// /// Funktionsname des gelöschten Ereignisses

// /// </param>

// /// <returns type = "void"/>

// if (element.detACHEvent) {

// element.detAchEvent ('on' + type, element [type + fn]);

// Element [Typ + fn] = null;

//} else if (element.removeEventListener) {

// element.removeEventListener (Typ, fn, false);

//}

//},

fügtcrollevent: function (Element, fn) {

/// <summary>

/// 1: append Scrollevent Event

/// 1.1 - fügtcrollevent (Element, FN) - SCROLLEvent -Ereignis an Element anhängen (Sonderereignis, Maus -Rad -Bildlaufereignis auf Element)

/// </summary>

/// <param name = "element" type = "element oder string">

/// Elementknoten

/// </param>

/// <param name = "fn" type = "function">

/// Ereignismethode

/// </param>

/// <returns type = "void"/>

var bindscrollfn = Funktion (e) {

e = e || Fenster.Event;

// Beurteilen Sie die Bildlaufrichtung des Bildlaufrads: Firefox unterscheidet sich von anderen Browsern

E.WHEEL = (E.WHELDELTA? E.WHELDELTA: -E.DETAIL)> 0? 1: -1; // Beurteilen Sie das durch das Ereignis invertierte Mausrad, 1 ist nach oben und -1 nach unten

// Blockieren Sie das Standardverhalten des Browsers

if (e.preventDefault) {// ff

E.PreventDefault ();

} anders {

E. returnValue = false; // dh

}

fn.call (Element, e);

}

if (document.addeventListener) {

// ff

Element.AdDeVentListener ('DommouSeScroll', Bindscrollfn, False);

// w3c

Element.AdDeVentListener ('Mousewheel', BindScrollfn, False);

} else // dh

{

Element.attacheEvent ('Onmousewheel', BindScrollfn);

}

getEvent: function () {

/// <summary>

/// 1: Eventobjekt holen

/// 1.1 - getEvent () - Erhalten Sie Ereignisobjekte ohne Parameter, während Kompatibilitäten IE und FF verarbeiten

/// </summary>

/// <returns type = "event"/>

if (document.all) {

Rückkehrfenster.Event;

}

func = getEvent.caller;

while (func! = null) {

var arg0 = func.argumente [0];

if (arg0) {

if ((arg0.constructor == Ereignis || arg0.constructor == MouseeEvent) || (Typof (arg0) == "Objekt" && arg0.preventDefault && arg0.stoppropagation) {

kehren Arg0 zurück;

}

func = func.caller;

}

null zurückkehren;

getMousepos: function (ev) {

/// <summary>

/// 1: Holen Sie sich die aktuellen Mauskoordinaten

/// 1.1 - GetMousepos (ev) - Holen Sie sich die aktuellen Mauskoordinaten, die Kompatibilitätsverarbeitung und das zurückgegebene Objektformat: {x: Maus x -Koordinaten, y: Maus -Y -Koordinaten}

/// </summary>

/// <param name = "ev" type = "event">

/// Event Event -Objekt

/// </param>

/// <returns type = "json"/>

if (! ev) {

ev = CurrScroll.geVent ();

}

if (ev.pagex || ev.pagey) {

zurückkehren {

x: ev.pagex,

Y: Ev.pagey

};

}

if (document.documentElement && document.documentElement.scrolltop) {

zurückkehren {

x: ev.clientx + document.documentElement.scrollleft - document.documentElement.clientleft,

y: ev.clienty + document.documentElement.scrolltop - document.documentElement.clienttop

};

}

sonst wenn (document.body) {

zurückkehren {

x: ev.clientX + document.body.scrollleft - document.body.clientleft,

y: ev.clienty + document.body.scrolltop - document.body.clienttop

};

}

Erweiterung: Funktion (Oldobj, Newobj) {

/// <summary>

/// 1: Zwei Objekte verschmelzen

/// 1.1 - Erweitern Sie (Oldobj, Newobj) - Fucken Sie zwei Objekte zusammen und geben Sie das fusionierte Objekt zurück, wobei es in Klon implementiert wird, sodass es keine Auswirkungen auf die beiden Objekte hat

/// </summary>

/// <param name = "oldobj" type = "object">

/// Objekt A, das zusammengeführt werden soll, das als Basisobjekt verwendet wird, überschreibt das gleichnamige Attribut des neuen Objekts in das Basisobjekt

/// </param>

/// <param name = "newobj" type = "object">

/// Objekt B zusammengeführt werden

/// </param>

/// <returns type = "object"/>

var tempobj = tool.clone (Oldobj);

für (var key in Newobj) {

if (newobj.hasownProperty (key) &&! tempobj.hasownProperty (key)) {

tempobj [key] = newObj [Schlüssel];

}

return tempobj;

Klon: Funktion (obj) {

/// <summary>

/// 1: Ein Objekt klonieren

/// 1.1 - Klon (OBJ) - Klon ein Objekt und geben das klonierte neue Objekt zurück. Der Prototyp des Objekts ist das geklonte Objekt

/// </summary>

/// <param name = "obj" type = "object">

/// Das Objekt zu klonen

/// </param>

/// <returns type = "object"/>

Funktion Clone () {}

Clone.Prototype = obj;

var newobj = new Clone ();

für (var key in Newobj) {

if (typeof newobj [key] == "Objekt") {

newobj [key] = tool.clone (newobj [key]);

}

kehre Newobj zurück;

convertValue: function (value) {

/// <summary>

/// 1: den Wert in einen gültigen Wert konvertieren

/// 1.1 - ConvertValue (Wert) - Konvertieren Sie den von JSON konfigurierten CSS -Wert in einen gültigen Wert. Bitte stellen Sie sicher, dass der Wert des Wertes nicht "automatisch" ist.

/// </summary>

/// <param name = "value" type = "object">

/// Der zu konvertierende Wert

/// </param>

/// <returns type = "object"/>

var reg =/^/d+$/g;

if (typeof (value) === 'nummer' || reg.test (value)) {

Rückgabewert + 'px';

} anders

Rückgabewert;

}

};

// Registrieren Sie sich im Fenster

window.linkFlyScroll = linkflyScroll;

// Registrieren Sie sich im Fenster.so namespace

if (! window.so) {

Fenster.so = {};

}

window.so.scroll = window.linkFlyScroll;

})(Fenster);

Codebeispiel

Die Codekopie lautet wie folgt:

<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">

<kopf>

window.onload = function () {

var config = {

Auto: True, // Wenn der Inhalt nicht die Höhe des Containers erreicht, wird die Bildlaufleiste automatisch versteckt

Höhe: '100', // Die Arbeitshöhe des Bildlaufleistenobjekts (die Bildlaufleiste wird angezeigt, wenn sie diese Höhe überschreitet), erhält automatisch die aktuelle Höhe des Objekts

Breite: 'Auto' // Scrollbar -Objekt Arbeitsbreite Breite

};

var scrollobj = so.scroll ('obj', config);

// scrollobj.change (); // Wenn sich der Inhalt der Bildlaufleiste ändert, muss die Bildlaufleistenanzeige aktualisiert werden, dann wird diese Methode aufgerufen

// scrollobj.roll (Wert); // Positionieren Sie die Scrollbar auf einen bestimmten Punkt, der Wert ist der Prozentsatz relativ zum Bildlaufbalkenobjekt

};

</script>

</head>

<body>

<div>

Derzeit taucht im Bereich des Unternehmensmanagements ein neuer "Modestil" auf, und einige riesige Unternehmen "schlänken" für sich selbst und verwandeln sich in schlauer und agilere Unternehmen. Es wird davon ausgegangen, dass die Oracle-Software die Hauptwartungskosten seiner Kunden zunehmend auf Berater und Lieferanten von Drittanbietern verlagert.

"In China werden 90% des Geschäfts von Oracle über diese Partner durchgeführt. Außerdem hat CEO Ellison auch eine kleine Insel in Hawaii gekauft", sagte Craig Guarente.

Als globaler Vizepräsident ist Guarente die Strategien von Oracle sehr bewusst. Guarente verfügt über 16 Jahre Berufserfahrung und verfügt über umfangreiche Erfahrung im Vertragsmanagement, im Software -Lizenzmanagement und im Software -Audit. Nachdem er Oracle im Jahr 2011 verlassen hatte, kam er zu Palisade, dessen Hauptgeschäft Oracle -Kunden bei der Bereitstellung von Softwarevertrag, Prüfungsintervention und Lizenz "Optimierung" bei der Bereitstellung von Software -Vertragsabschluss ermöglichen.

Laut Guarente entwickelt sich das Geschäft von Palisade sehr schnell. Als Drittanbieter-Organisation hilft Palisade Kunden, große Bestellungen zu gewinnen, da sie näher am Markt sind und die Benutzerbedürfnisse genauer verstehen können.

Im Allgemeinen helfen Beratungsunternehmen Kunden dabei, ihre tatsächlichen Bedürfnisse und welchen Wert die Software selbst bereitzustellen. Guarente gab eine detaillierte Erklärung durch praktische Operationen. Zum Beispiel: "Wenn Sie ein neues Rechenzentrum erstellen möchten, einen neuen Disaster Recovery-Plan starten oder wenn Sie in die Cloud eintreten möchten, entwickelt ein Drittunternehmen zunächst eine Planungskarte, um das ultimative Ziel des Benutzers zu erreichen. Wenn die Software an verschiedenen Orten auf vielen Servern eingesetzt wird, verliert das Enterprise-Software. Administratoren können Datenbankprobleme durch automatische Last -Repository -Berichte (AWR) diagnostizieren.

In den letzten Jahren installieren viele Unternehmen mit dem Aufstieg der Software -Audit -Welle Software -Asset -Management -Tools, um zu bestimmen, welche Software sie verwenden, wie lange sie dauern kann und wie viele Personen in einem Unternehmen sie verwenden. Der Senior Management-Analyst Hegedus sagte jedoch: "Kein Tool kann Unternehmensregeln, insbesondere die Produktanwendungen von Oracle, genau verstehen, und professionelle Organisationen von Drittanbietern sind erforderlich, um Benutzern zu helfen, die Regeln für die Softwaregelemente zu verstehen."

Wie kann ich die Softwareanwendungen von Oracle patchen? Der Präsident von Oracle, Mark Hurd, sagte letzte Woche, dass Drittanbieter-Institutionen zu Beginn von Unternehmensanträgen als Service-Unterstützer definiert werden sollten, damit Unternehmen in Zukunft kostenlose Patch-Reparaturen und andere Unterstützung erhalten können, anstatt nur Produktrechte für geistige Eigentum von Produkten zu kaufen. Darüber hinaus sollten Unternehmen Berater effektiv einsetzen, um den ersten Schritt zur Kostenkontrolle zu unterstützen, wenn Sie verstehen, welche Software das Unternehmen verwendet und welche Vereinbarung die Vereinbarung umfasst. Lassen Sie den Softwarelieferanten nicht blind und kaufen Sie Software gemäß den Vorhersagen und Vermutungen.

</div>

</body>

</html>

Das obige ist der gesamte Inhalt dieses Artikels, und die Erklärung ist sehr detailliert. Ich hoffe es gefällt euch.