Ursprünglich wollte ich einen Tooltip-Effekt erstellen, der schwebende Positionierung und Mausverfolgung kombiniert, aber ich habe festgestellt, dass Positionierung und Mausverfolgung an einigen wichtigen Stellen immer noch unterschiedlich sind, also sollten wir es separat machen.
Dieser Effekt selbst ist nicht sehr schwierig. Wir haben uns hauptsächlich um die Programmstruktur und -erweiterung gekümmert, um die Verwendung komfortabler zu machen und ihn an mehr Orten nutzen zu können.
Programmfunktionen
Vollständiger Beispiel-Download (zum Herunterladen klicken)
<!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 ">
<Kopf>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript-Floating-Positionierungsaufforderungseffekt</title>
<Skript>
var $$ = Funktion (id) {
return „string“ == typeof id ? document.getElementById(id) : id;
};
var isIE = navigator.userAgent.indexOf('MSIE') != -1;
var isIE6 = isIE && ([/MSIE (d).0/i.exec(navigator.userAgent)][0][1] == "6");
var isChrome = navigator.userAgent.indexOf('Chrome') != -1;
var isSafari = navigator.userAgent.indexOf('AppleWebKit') != -1;
// mit Input von Tino Zijdel, Matthias Miller, Diego Perini
// http://dean.edwards.name/weblog/2005/10/add-event/
Funktion addEvent(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} anders {
if (!handler.$$guid) handler.$$guid = addEvent.guid++;
if (!element.events) element.events = {};
var handler = element.events[type];
if (!handlers) {
handlers = element.events[type] = {};
if (element["on" + type]) {
handler[0] = element["on" + type];
}
}
handlers[handler.$$guid] = handler;
element["on" + type] = handleEvent;
}
};
addEvent.guid = 1;
Funktion RemoveEvent(Element, Typ, Handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} anders {
if (element.events && element.events[Typ]) {
delete element.events[type][handler.$$guid];
}
}
};
Funktion handleEvent(event) {
var returnValue = true;
event = event ||. fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);
var handler = this.events[event.type];
for (var i in Handlern) {
this.$$handleEvent = handlers[i];
if (this.$$handleEvent(event) === false) {
returnValue = false;
}
}
return returnValue;
};
Funktion fixEvent(event) {
event.target = event.srcElement;
if(event.type == "mouseout") {
event.latedTarget = event.toElement;
}else if(event.type == "mouseover") {
event.latedTarget = event.fromElement;
}
Rückkehrereignis;
};
var Extend = function(destination, source) {
for (var-Eigenschaft in der Quelle) {
Ziel[Eigenschaft] = Quelle[Eigenschaft];
}
Rückreiseziel;
}
var Enthält = function(a, b){
return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16);
}
var Bind = function(object, fun) {
var args = Array.prototype.slice.call(arguments, 2);
Rückgabefunktion() {
return fun.apply(object, args.concat(Array.prototype.slice.call(arguments)));
}
}
var BindAsEventListener = function(object, fun) {
var args = Array.prototype.slice.call(arguments, 2);
Rückgabefunktion (Ereignis) {
return fun.apply(object, [event].concat(args));
}
}
var FixedTips = function(tip, options){
this.Tip = $$(tip);//Eingabeaufforderungsfeld
this._trigger = null;//Trigger-Objekt
this._timer = null;//Timer
this._cssTip = this.Tip.style;//Vereinfachter Code
this._onshow = false;//Zeichnet den aktuellen Anzeigestatus auf
this.SetOptions(options);
//Tip-Objekt verarbeiten
this._cssTip.margin = 0;//Positionierungsprobleme vermeiden
this._cssTip.position = "absolut";
this._cssTip.visibility = "hidden";
this._cssTip.display = "block";
this._cssTip.zIndex = 99;
this._cssTip.left = this._cssTip.top = "-9999px";//Vermeiden Sie Bildlaufleisten im Platzhalter
//Offset-Korrekturparameter
var iLeft = iTop = 0, p = this.Tip;
while (p.offsetParent) {
p = p.offsetParent; iLeft += p.offsetLeft; iTop += p.offsetTop;
};
this._offsetleft = iLeft;
this._offsettop = iTop;
//Wird weiterhin angezeigt, wenn man sich in das Tip-Objekt bewegt
addEvent(this.Tip, "mouseover", BindAsEventListener(this, function(e){
//Wenn ein externes Element eintritt, bedeutet dies, dass es sich derzeit in der Verzögerungsphase für das Ausblenden befindet. Anschließend wird der Timer gelöscht, um das Ausblenden abzubrechen.
this.Check(e.latedTarget) && clearTimeout(this._timer);
}));
//ie6 übernimmt die Auswahl
if (isIE6) {
this._iframe = document.createElement("<iframe style='position:absolute;filter:alpha(opacity=0);display:none;'>");
document.body.insertBefore(this._iframe, document.body.childNodes[0]);
};
//Wird zum Ausblenden durch Klicken verwendet
this._fCH = BindAsEventListener(this, function(e) {
if (this.Check(e.target) && this.CheckHide()) {
this.ReadyHide(this._trigger.ClickHideDelay);
};
});
//Wird verwendet, um das Ausblenden der Methode auszulösen
this._fTH = BindAsEventListener(this, function(e) {
if (this.Check(e.latedTarget) && this.CheckHide()) {
this.ReadyHide(this._trigger.TouchHideDelay);
};
});
};
FixedTips.prototype = {
_doc: document.documentElement,//Vereinfachen Sie den Code
//Standardeigenschaften festlegen
SetOptions: Funktion(Optionen) {
this.options = {//Standardwert
ClickShow: true, // Ob im Klickmodus angezeigt werden soll
ClickShowDelay: false,//Ob die Verzögerung der Klickanzeige
ClickHide: true, // Ob der Klickmodus ausgeblendet ist
ClickHideDelay: false, // Gibt an, ob geklickt werden soll, um die Verzögerung auszublenden
TouchShow: true, // Ob der Triggermodus angezeigt wird
TouchShowDelay: true,//Ob die Anzeigeverzögerung ausgelöst werden soll
TouchHide: true, // Ob der Triggermodus ausgeblendet ist
TouchHideDelay: true,//Ob die Ausblendverzögerung ausgelöst werden soll
ShowDelay: 300,//Anzeigeverzögerungszeit
HideDelay: 300, // Verzögerungszeit ausblenden
Ausrichten: „clientleft“,//Horizontale Positionierung
vAlign: „clienttop“,//vertikale Positionierung
Benutzerdefiniert: { links: 0, oben: 0 },//Benutzerdefinierte Positionierung
Prozent: { links: 0, oben: 0 }, // Angepasste prozentuale Positionierung
Adaptiv: false, // Ob zur adaptiven Positionierung
Zurücksetzen: false, // Ob während der adaptiven Positionierung neu positioniert werden soll
onShow: function(){},//Beim Anzeigen ausführen
onHide: function(){}//Wird ausgeführt, wenn es ausgeblendet ist
};
Extend(this.options, options || {});
},
//Überprüfen Sie das Triggerelement
Überprüfen Sie: function(elem) {
// Gibt zurück, ob es sich um ein externes Element handelt (d. h. um ein anderes Elementobjekt als das Triggerelement und das Tip-Objekt selbst und seine internen Elemente).
return !this._trigger ||
!(
this.Tip === elem ||. this._trigger.Elem === elem ||
Enthält(this.Tip, elem) ||. Enthält(this._trigger.Elem, elem)
);
},
//Bereit zur Anzeige
ReadyShow: Funktion(Verzögerung) {
clearTimeout(this._timer);
var trigger = this._trigger;
//Zum Ausblenden anklicken
trigger.ClickHide && addEvent(document, "click", this._fCH);
//Trigger-Modus ausgeblendet
trigger.TouchHide && addEvent(this._trigger.Elem, "mouseout", this._fTH);
//Ob die Auslösung verzögert werden soll
if (Verzögerung) {
this._timer = setTimeout(Bind(this, this.Show), trigger.ShowDelay);
} else { this.Show( };
},
//zeigen
Anzeigen: function() {
clearTimeout(this._timer);
this._trigger.onShow();//Stellen Sie es zur einfachen Änderung von Attributen in den Vordergrund
//Berechnen Sie links und oben basierend auf der voreingestellten Positionierung und der benutzerdefinierten Positionierung
var trigger = this._trigger, rect = trigger.Elem.getBoundingClientRect(),
scrolldoc = isChrome ||. isSafari ? document.body : this._doc,
scrollLeft = scrolldoc.scrollLeft, scrollTop = scrolldoc.scrollTop,
customLeft = trigger.Custom.left, customTop = trigger.Custom.top,
iLeft = this.GetLeft(rect, trigger.Align) + customLeft,
iTop = this.GetTop(rect, trigger.vAlign) + customTop;
//Benutzerdefinierte prozentuale Positionierung
if (trigger.Percent.left) { iLeft += .01 * trigger.Percent.left * trigger.Elem.offsetWidth };
if (trigger.Percent.top) { iTop += .01 * trigger.Percent.top * trigger.Elem.offsetHeight };
//Adaptive Fensterpositionierung
if (trigger.Adaptive) {
//Korrekte Positionierungsparameter
var maxLeft = this._doc.clientWidth - this.Tip.offsetWidth,
maxTop = this._doc.clientHeight - this.Tip.offsetHeight;
if (trigger.Reset) {
//Automatische Neupositionierung
if (iLeft > maxLeft || iLeft < 0) {
iLeft = this.GetLeft(rect, 2 * iLeft > maxLeft ? "left" : "right") + customLeft;
};
if (iTop > maxTop || iTop < 0) {
iTop = this.GetTop(rect, 2 * iTop > maxTop ? "top" : "bottom") + customTop;
};
} anders {
//Korrigieren Sie es an der entsprechenden Position
iLeft = Math.max(Math.min(iLeft, maxLeft), 0);
iTop = Math.max(Math.min(iTop, maxTop), 0);
};
};
//Position und Anzeige festlegen
this._cssTip.left = iLeft + scrollLeft - this._offsetleft + "px";
this._cssTip.top = iTop + scrollTop - this._offsettop + "px";
this._cssTip.visibility = "visible";
//ie6 übernimmt die Auswahl
if (isIE6) {
this._iframe.style.left = iLeft + scrollLeft + "px";
this._iframe.style.top = iTop + scrollTop + "px";
this._iframe.style.width = this.Tip.offsetWidth + "px";
this._iframe.style.height = this.Tip.offsetHeight + "px";
this._iframe.style.display = "";
};
//Trigger-Modus ausgeblendet
trigger.TouchHide && addEvent(this.Tip, "mouseout", this._fTH);
},
//Den linken Teil des relativen Triggerelements abrufen
GetLeft: function(rect, align) {
switch (align.toLowerCase()) {
Fall „links“:
return rect.left - this.Tip.offsetWidth;
Fall „clientleft“:
return rect.left;
Fall „Mitte“ :
return (rect.left + rect.right - this.Tip.offsetWidth)/2;
Fall „clientright“:
return rect.right - this.Tip.offsetWidth;
Fall „richtig“:
Standard :
return rect.right;
};
},
//Oben relativ zum Triggerelement abrufen
GetTop: function(rect, valign) {
switch (valign.toLowerCase()) {
Fall „oben“:
return rect.top - this.Tip.offsetHeight;
Fall „clienttop“:
return rect.top;
Fall „Mitte“ :
return (rect.top + rect.bottom - this.Tip.offsetHeight)/2;
Fall „clientbottom“:
return rect.bottom - this.Tip.offsetHeight;
Fall „unten“:
Standard :
return rect.bottom;
};
},
// Bereite dich darauf vor, dich zu verstecken
ReadyHide: Funktion(Verzögerung) {
clearTimeout(this._timer);
if (Verzögerung) {
this._timer = setTimeout(Bind(this, this.Hide), this._trigger.HideDelay);
} else { this.Hide( };
},
//verstecken
Ausblenden: function() {
clearTimeout(this._timer);
// Zum Ausblenden einrichten
this._cssTip.visibility = "hidden";
this._cssTip.left = this._cssTip.top = "-9999px";
//ie6 übernimmt die Auswahl
if (isIE6) { this._iframe.style.display = "none" };
//Triggerobjekt verarbeiten
if (!!this._trigger) {
this._trigger.onHide();
removeEvent(this._trigger.Elem, "mouseout", this._fTH);
}
this._trigger = null;
//Ereignis entfernen
removeEvent(this.Tip, "mouseout", this._fTH);
removeEvent(document, "click", this._fCH);
},
//Triggerobjekt hinzufügen
Hinzufügen: function(elem, options) {
//Erstelle ein Triggerobjekt
var elem = $$(elem), trigger = Extend(Extend({ Elem: elem }, this.options), options || {});
//Zum Anzeigen anklicken
addEvent(elem, "click", BindAsEventListener(this, function(e){
if (trigger.ClickShow) {
if (this.CheckShow(trigger)) {
this.ReadyShow(trigger.ClickShowDelay);
} anders {
clearTimeout(this._timer);
};
};
}));
//Anzeige des Triggermodus
addEvent(elem, "mouseover", BindAsEventListener(this, function(e){
if (trigger.TouchShow) {
if (this.CheckShow(trigger)) {
this.ReadyShow(trigger.TouchShowDelay);
} else if (this.Check(e.latedTarget)) {
clearTimeout(this._timer);
};
};
}));
//Triggerobjekt zurückgeben
Rückholauslöser;
},
//Scheck anzeigen
CheckShow: Funktion(Trigger) {
if (trigger !== this._trigger) {
//Wenn es sich nicht um dasselbe Triggerobjekt handelt, führen Sie zuerst „Hide“ aus, um Konflikte zu vermeiden.
this.Hide(); this._trigger = trigger true;
} else { return false };
},
//Scheck ausblenden
CheckHide: function() {
if (this._cssTip.visibility === "hidden") {
//Es ist ursprünglich ein versteckter Zustand, es ist nicht mehr nötig, „Hide“ auszuführen
clearTimeout(this._timer);
removeEvent(this._trigger.Elem, "mouseout", this._fTH);
this._trigger = null;
removeEvent(document, "click", this._fCH);
return false;
} else { return true };
}
};
</script>
</head>
<Körper>
<Stil>
.trigger{border:1px solid #003099; background:#e2e7ff; width:100px;}
.tip{border:1px solid #c00000; background:#ffcccc;}
</style>
<div style="padding:50px;">
<div id="idTip" class="tip"></div>
<div id="idTrigger1" class="trigger">
<wählen>
<option>test</option>
</select>
</div>
<br>
horizontale Position:
<Beschriftung>
<input name="nAlign" type="radio" value="left" />
links </label>
<Beschriftung>
<input name="nAlign" type="radio" value="clientleft" />
clientleft </label>
<Beschriftung>
<input name="nAlign" type="radio" value="center" />
Mitte </label>
<Beschriftung>
<input name="nAlign" type="radio" value="clientright" />
clientright </label>
<Beschriftung>
<input name="nAlign" type="radio" value="right" reviewed="checked" />
richtig </label>
<br>
Vertikale Position:
<Beschriftung>
<input name="nVAlign" type="radio" value="top" />
oben </label>
<Beschriftung>
<input name="nVAlign" type="radio" value="clienttop" />
clienttop </label>
<Beschriftung>
<input name="nVAlign" type="radio" value="center" />
Mitte </label>
<Beschriftung>
<input name="nVAlign" type="radio" value="clientbottom" />
clientbottom </label>
<Beschriftung>
<input name="nVAlign" type="radio" value="bottom" reviewed="checked" />
unten </label>
<br>
<br>
Benutzerdefiniertes Targeting:
links:
<input id="idLeft" type="text" size="5" value="0" maxlength="3" />
Spitze:
<input id="idTop" type="text" size="5" value="0" maxlength="3"/>
<br>
<br>
<input id="idClick" type="checkbox" reviewed="checked" />
<label for="idClick">Klickmethode</label>
<input id="idTouch" type="checkbox" reviewed="checked" />
<label for="idTouch">Trigger-Methode</label>
<br>
<br>
Verzögerungszeit:
<input id="idDelayTime" type="text" size="5" value="0" maxlength="4"/>
<input id="idDelay" type="button" value="Verzögerung abbrechen" />
<br>
<br>
Weitere Anwendungsbeispiele: <br>
<br>
<div id="idTest1"> Titel verwenden: <a href=" http://www.cnblogs.com/cloudgamer/archive/2008/11/17/1334778.html " title="Drag-and-Drop-Effekt"> Ziehen und Drop-Effekt </a> Effekt</a > <a href=" http://www.cnblogs.com/cloudgamer/archive/2008/07/21/1247267.html " title="Bildschneideeffekt"> Bildschneideeffekt</a > </div >
<br>
<br>
Beliebte Avatar-Anzeigeeffekte: <br>
<br>
<div id="idTest2"> <a href=" http://www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html " title="Bildgleiteffekt"> <img src= "/articleimg/2009/07/6852/r_mx1.jpg" border="0"/> </a> 23/1205642.html " title="Bildtransformationseffekt"><img src="/articleimg/2009/07/6852/r_mx2.jpg" border="0"/></a> <a href=" http://www.cnblogs.com/cloudgamer/archive/2008/05/13/1194272.html " title="Bildgleiteffekt"><img src="/articleimg/2009/07/6852/r_mx3.jpg " border="0"/></a> </div>
<br>
<br>
Schaltfläche „Schließen“: <a id="idTest3" href=" http://www.cnblogs.com/cloudgamer/archive/2009/05/18/TableFixed.html"> Positionierungseffekt für Tabellenzeilen</a>
</div>
<Skript>
var forEach = function(array, callback, thisObject){
if(array.forEach){
array.forEach(callback, thisObject);
}anders{
for (var i = 0, len = array.length; i < len; i++) { callback.call(thisObject, array[i], i, array }
}
}
/////////////////////////////////////////////////////////////////////////
var ft = new FixedTips("idTip");
/////////////////////////////////////////////////////////////////////////
var trigger1 = ft.Add("idTrigger1", {
onShow: function(){
//Positionierungstest
var sAlign = this.Align, sVAlign = this.vAlign;
forEach(document.getElementsByName("nAlign"), function(o){ if(o.checked){ sAlign = o.value; } });
forEach(document.getElementsByName("nVAlign"), function(o){ if(o.checked){ sVAlign = o.value; } });
this.Align = sAlign;
this.vAlign = sVAlign;
this.Custom.left = $$("idLeft").value |.
this.Custom.top = $$("idTop").value |.
trigger1.ShowDelay = trigger1.HideDelay = $$("idDelayTime").value 0 ||.
ft.Tip.innerHTML = sAlign + "<br>" + sVAlign + "<br>" + "left: " + this.Custom.left + ", top: " + this.Custom.top;
}
});
//Verzögerungstest
$$("idDelayTime").value = trigger1.ShowDelay;
$$("idDelay").onclick = function(){
if(trigger1.TouchShowDelay){
trigger1.ClickShowDelay = trigger1.ClickHideDelay =
trigger1.TouchShowDelay = trigger1.TouchHideDelay = false;
$$("idDelayTime").disabled = true;
this.value = „Verzögerung festlegen“;
}anders{
trigger1.ClickShowDelay = trigger1.ClickHideDelay =
trigger1.TouchShowDelay = trigger1.TouchHideDelay = true;
$$("idDelayTime").disabled = false;
this.value = „Verzögerung abbrechen“;
}
}
//Methodentest
$$("idClick").onclick = function(){
trigger1.ClickShow = trigger1.ClickHide = this.checked;
}
$$("idTouch").onclick = function(){
trigger1.TouchShow = trigger1.TouchHide = this.checked;
}
///////////////////////////////////////////////////////////////////////////////////
forEach($$("idTest1").getElementsByTagName("a"), function(o){
var title = o.title; o.title = "";
ft.Add(o, { vAlign: "bottom", Percent: { left: 50, top: 0 }, onShow: function(){ ft.Tip.innerHTML = title; } });
})
///////////////////////////////////////////////////////////////////////////////////
forEach($$("idTest2").getElementsByTagName("a"), function(o){
var img = o.getElementsByTagName("img")[0], title = o.title;
o.title = "";
ft.Add(img, { Custom: { left: -6, top: -6 },
onShow: function(){
var str = '<a href="' + o.href + '"><img src="' + img.src + '" style="padding-bottom:5px;" a>';
str += '<br /><a href="' + o.href + '">' + title + '</a>';
ft.Tip.innerHTML = str;
}
});
})
///////////////////////////////////////////////////////////////////////////////////
ft.Add("idTest3", { ClickHide: false, TouchHide: false, Align: "right",
onShow: function(){
var str = ' <a href=" http://www.cnblogs.com/cloudgamer/archive/2009/03/11/1408333.html "> Farbverlauf und Verlaufseffekte</a><br />';
str += ' <a href=" http://www.cnblogs.com/cloudgamer/archive/2008/10/20/1314766.html "> Imitation 163-Netzwerkfestplatte, kein System zum Hochladen von Aktualisierungsdateien</a><br / >';
str += '<input type="button" onclick="ft.Hide();" value="Zum Schließen klicken" />';
ft.Tip.innerHTML = str;
}
});
</script>
</body>
</html>
JavaScript, Positionierung, Floating, Tipps, Tooltips, FixedTips, Tip
Programmbeschreibung
Tippobjekt :
Das Tip-Objekt ist ein Container zum Anzeigen von Eingabeaufforderungsinformationen, und das Programm wird durch das Tip-Attribut dargestellt. Hierfür gibt es keine Voraussetzungen, einige Einstellungen werden bei der Initialisierung des Programms vorgenommen.
Nehmen Sie zunächst folgende Einstellungen vor:
this._cssTip.margin = 0;
this._cssTip.position = "absolut";
this._cssTip.visibility = "hidden";
this._cssTip.display = "block";
this._cssTip.zIndex = 99;
this._cssTip.left = this._cssTip.top = "-9999px";
Der Rand wird auf 0 gesetzt, um einige Positionierungsprobleme zu vermeiden. Er wird zum Ausblenden statt zum Anzeigen verwendet, da das Programm die OffsetWidth- und OffsetHeight-Werte der Spitze ermitteln muss. Außerdem muss die Position „Left“ und „Top“ festgelegt werden, um zu verhindern, dass die Bildlaufleiste angezeigt wird Die Spitze nimmt den Raum ein.
Da sich die Spitze möglicherweise innerhalb anderer positionierter Elemente befindet, müssen zwei Offset-Korrekturparameter festgelegt werden:
var iLeft = iTop = 0, p = this.Tip.offsetParent;
while (!(p === document.body || p === document.documentElement)) {
iLeft += p.offsetLeft; iTop += p.offsetTop;
};
this._offsetleft = iLeft;
this._offsettop = iTop;
Fügen Sie abschließend dem Mouseover von Tip ein Ereignis hinzu, das später erläutert wird.