เดิมทีฉันต้องการสร้างเอฟเฟกต์คำแนะนำเครื่องมือที่รวมการวางตำแหน่งแบบลอยและการติดตามเมาส์ แต่ฉันพบว่าการวางตำแหน่งและการติดตามเมาส์ยังคงแตกต่างกันในบางตำแหน่งที่สำคัญ ดังนั้นเราจึงควรทำแยกกัน
เอฟเฟ็กต์นี้เองได้ไม่ยากนัก โดยหลักๆ แล้วเราใช้ความพยายามในโครงสร้างของโปรแกรมและการขยายเพื่อให้สะดวกต่อการใช้งานมากขึ้นและสามารถนำไปใช้ในที่ต่างๆ ได้มากขึ้น
คุณสมบัติของโปรแกรม
ดาวน์โหลดตัวอย่างฉบับสมบูรณ์ (คลิกเพื่อดาวน์โหลด)
<!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 ">
<หัว>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>เอฟเฟกต์ข้อความแสดงตำแหน่งแบบลอยของ JavaScript</title>
<สคริปต์>
var $$ = ฟังก์ชั่น (id) {
กลับ "สตริง" == ประเภทของ 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;
// พร้อมข้อมูลจาก Tino Zijdel, Matthias Miller, Diego Perini
// http://dean.edwards.name/weblog/2005/10/add-event/
ฟังก์ชั่น addEvent (องค์ประกอบ, ประเภท, ตัวจัดการ) {
ถ้า (element.addEventListener) {
element.addEventListener (ประเภท, ตัวจัดการ, เท็จ);
} อื่น {
if (!handler.$$guid) ตัวจัดการ.$$guid = addEvent.guid++;
ถ้า (!element.events) element.events = {};
ตัวจัดการ var = element.events[type];
ถ้า (!ตัวจัดการ) {
ตัวจัดการ = element.events [ประเภท] = {};
ถ้า (องค์ประกอบ ["บน" + ประเภท]) {
ตัวจัดการ [0] = องค์ประกอบ ["บน" + ประเภท];
-
-
ตัวจัดการ[handler.$$guid] = ตัวจัดการ;
องค์ประกอบ ["บน" + ประเภท] = handleEvent;
-
-
addEvent.guid = 1;
ฟังก์ชั่น RemoveEvent (องค์ประกอบ, ประเภท, ตัวจัดการ) {
ถ้า (element.removeEventListener) {
element.removeEventListener (ประเภท, ตัวจัดการ, เท็จ);
} อื่น {
ถ้า (element.events && element.events[ประเภท]) {
ลบ element.events[type][handler.$$guid];
-
-
-
ฟังก์ชั่น handleEvent (เหตุการณ์) {
var returnValue = จริง;
เหตุการณ์ = เหตุการณ์ ||. fixEvent (((this.ownerDocument || this.document || นี้). parentWindow || หน้าต่าง). เหตุการณ์);
ตัวจัดการ var = this.events [event.type];
สำหรับ (var i ในตัวจัดการ) {
this.$$handleEvent = ตัวจัดการ [i];
ถ้า (this.$$handleEvent (เหตุการณ์) === false) {
returnValue = เท็จ;
-
-
ส่งคืนค่าส่งคืน;
-
ฟังก์ชั่น fixEvent (เหตุการณ์) {
event.target = event.srcElement;
ถ้า (event.type == "เมาส์ออก") {
event. relatedTarget = event.toElement;
} อื่น if(event.type == "mouseover") {
event. relatedTarget = event.fromElement;
-
เหตุการณ์การกลับมา;
-
var Extended = function (ปลายทาง, แหล่งที่มา) {
สำหรับ (คุณสมบัติ var ในแหล่งที่มา) {
ปลายทาง [คุณสมบัติ] = แหล่งที่มา [คุณสมบัติ];
-
จุดหมายปลายทางขากลับ;
-
var ประกอบด้วย = function(a, b){
กลับ a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16);
-
var Bind = ฟังก์ชั่น (วัตถุ, สนุก) {
var args = Array.prototype.slice.call (อาร์กิวเมนต์, 2);
ฟังก์ชันส่งคืน () {
กลับ fun.apply (วัตถุ args.concat (Array.prototype.slice.call (อาร์กิวเมนต์)));
-
-
var BindAsEventListener = ฟังก์ชั่น (วัตถุ, สนุก) {
var args = Array.prototype.slice.call (อาร์กิวเมนต์, 2);
ฟังก์ชั่นส่งคืน (เหตุการณ์) {
กลับ fun.apply (วัตถุ [เหตุการณ์] .concat (args));
-
-
var FixTips = function(ทิป, ตัวเลือก){
this.Tip = $$(tip);//กล่องพร้อมท์
this._trigger = null;//ทริกเกอร์วัตถุ
this._timer = null;//Timer
this._cssTip = this.Tip.style;//โค้ดตัวย่อ
this._onshow = false;//บันทึกสถานะการแสดงผลปัจจุบัน
this.SetOptions(ตัวเลือก);
//วัตถุเคล็ดลับกระบวนการ
this._cssTip.margin = 0;//หลีกเลี่ยงปัญหาการวางตำแหน่ง
this._cssTip.position = "สัมบูรณ์";
this._cssTip.visibility = "ซ่อน";
this._cssTip.display = "บล็อก";
นี้._cssTip.zIndex = 99;
this._cssTip.left = this._cssTip.top = "-9999px";//หลีกเลี่ยงแถบเลื่อนในตัวยึดตำแหน่ง
//พารามิเตอร์การแก้ไขออฟเซ็ต
var iLeft = iTop = 0, p = this.Tip;
ในขณะที่ (p.offsetParent) {
p = p.offsetParent; iLeft += p.offsetLeft;
-
this._offsetleft = iLeft;
นี้._offsettop = iTop;
//แสดงต่อไปเมื่อย้ายไปยังวัตถุ Tip
addEvent(this.Tip, "mouseover", BindAsEventListener(นี่, ฟังก์ชัน(e){
//หากมีองค์ประกอบภายนอกเข้ามา แสดงว่าขณะนี้อยู่ในระยะหน่วงเวลาการซ่อน จากนั้นให้ล้างตัวจับเวลาเพื่อยกเลิกการซ่อน
this.Check (e. relatedTarget) && clearTimeout (this._timer);
-
//ie6 จัดการเลือก
ถ้า (isIE6) {
this._iframe = document.createElement("<iframe style='position:absolute;filter:alpha(opacity=0);display:none;'>");
document.body.insertBefore(this._iframe, document.body.childNodes[0]);
-
//ใช้ในการซ่อนโดยการคลิก
this._fCH = BindAsEventListener (สิ่งนี้ ฟังก์ชัน (e) {
ถ้า (this.Check (e.target) && this.CheckHide ()) {
นี้.ReadyHide(this._trigger.ClickHideDelay);
-
-
//ใช้เพื่อเรียกวิธีการซ่อน
this._fTH = BindAsEventListener (สิ่งนี้ ฟังก์ชัน (e) {
ถ้า (this.Check (e. relatedTarget) && this.CheckHide ()) {
นี้.ReadyHide(this._trigger.TouchHideDelay);
-
-
-
FixTips.prototype = {
_doc: document.documentElement,//ลดความซับซ้อนของโค้ด
//ตั้งค่าคุณสมบัติเริ่มต้น
SetOptions: ฟังก์ชั่น (ตัวเลือก) {
this.options = {//ค่าเริ่มต้น
ClickShow: จริง//ไม่ว่าจะแสดงในโหมดคลิกหรือไม่
ClickShowDelay: false,//ไม่ว่าจะเป็นการหน่วงเวลาการแสดงการคลิก
ClickHide: จริง // ไม่ว่าโหมดการคลิกจะถูกซ่อนอยู่หรือไม่
ClickHideDelay: false,//ว่าจะคลิกเพื่อซ่อนการหน่วงเวลาหรือไม่
TouchShow: จริง//ไม่ว่าจะแสดงโหมดทริกเกอร์หรือไม่
TouchShowDelay: จริง // ไม่ว่าจะทริกเกอร์การหน่วงเวลาการแสดงผลหรือไม่
TouchHide: จริง // ไม่ว่าโหมดทริกเกอร์จะถูกซ่อนอยู่หรือไม่
TouchHideDelay: จริง // ไม่ว่าจะทริกเกอร์การซ่อนดีเลย์หรือไม่
ShowDelay: 300 // แสดงเวลาหน่วงเวลา
HideDelay: 300,//ซ่อนเวลาดีเลย์
จัดตำแหน่ง: "clientleft",//การวางตำแหน่งแนวนอน
vAlign: "clienttop",//การวางตำแหน่งในแนวตั้ง
กำหนดเอง: { ซ้าย: 0, บน: 0 },//กำหนดตำแหน่งเอง
เปอร์เซ็นต์: { ซ้าย: 0, บน: 0 },//กำหนดตำแหน่งเปอร์เซ็นต์เอง
การปรับตัว: เท็จ//ไม่ว่าจะอยู่ในตำแหน่งแบบปรับตัวหรือไม่
รีเซ็ต: เท็จ//ไม่ว่าจะเปลี่ยนตำแหน่งระหว่างการปรับตำแหน่งหรือไม่
onShow: function(){},//ดำเนินการเมื่อแสดง
onHide: function(){}//ดำเนินการเมื่อถูกซ่อน
-
ขยาย (this.options, ตัวเลือก || {});
-
//ตรวจสอบองค์ประกอบทริกเกอร์
ตรวจสอบ: ฟังก์ชั่น (องค์ประกอบ) {
//ส่งคืนไม่ว่าจะเป็นองค์ประกอบภายนอก (นั่นคือวัตถุองค์ประกอบอื่นที่ไม่ใช่องค์ประกอบทริกเกอร์และวัตถุเคล็ดลับเองและองค์ประกอบภายใน)
กลับ !this._trigger ||
-
this.Tip === องค์ประกอบ ||. this._trigger.Elem === องค์ประกอบ ||
ประกอบด้วย (this.Tip, elem) ||. ประกอบด้วย (this._trigger.Elem, elem)
-
-
//พร้อมโชว์.
ReadyShow: ฟังก์ชั่น (ล่าช้า) {
clearTimeout(this._timer);
ทริกเกอร์ var = this._trigger;
//คลิกเพื่อซ่อน
trigger.ClickHide && addEvent(เอกสาร "คลิก" this._fCH);
//ซ่อนโหมดทริกเกอร์
trigger.TouchHide && addEvent(this._trigger.Elem, "mouseout", this._fTH);
//ไม่ว่าจะชะลอการทริกเกอร์หรือไม่
ถ้า (ล่าช้า) {
this._timer = setTimeout (ผูก (สิ่งนี้, this.Show), trigger.ShowDelay);
} อื่น ๆ { this.Show(); };
-
//แสดง
แสดง: ฟังก์ชั่น() {
clearTimeout(this._timer);
this._trigger.onShow();//วางไว้ข้างหน้าเพื่อให้แก้ไขแอตทริบิวต์ได้ง่าย
// คำนวณด้านซ้ายและด้านบนตามตำแหน่งที่กำหนดไว้ล่วงหน้าและตำแหน่งที่กำหนดเอง
var trigger = this._trigger, rect = trigger.Elem.getBoundingClientRect(),
scrolldoc = isChrome ||. isSafari ?
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;
//ตำแหน่งเปอร์เซ็นต์ที่กำหนดเอง
ถ้า (trigger.Percent.left) { iLeft += .01 * trigger.Percent.left * trigger.Elem.offsetWidth };
ถ้า (trigger.Percent.top) { iTop += .01 * trigger.Percent.top * trigger.Elem.offsetHeight };
// การวางตำแหน่งหน้าต่างแบบปรับได้
ถ้า (ทริกเกอร์ Adaptive) {
//แก้ไขพารามิเตอร์ตำแหน่ง
var maxLeft = this._doc.clientWidth - this.Tip.offsetWidth,
maxTop = this._doc.clientHeight - this.Tip.offsetHeight;
ถ้า (ทริกเกอร์รีเซ็ต) {
// การเปลี่ยนตำแหน่งอัตโนมัติ
ถ้า (iLeft > maxLeft || iLeft < 0) {
iLeft = this.GetLeft(rect, 2 * iLeft > maxLeft ? "left" : "right") + customLeft;
-
ถ้า (iTop > maxTop || iTop < 0) {
iTop = this.GetTop(rect, 2 * iTop > maxTop ? "top" : "bottom") + customTop;
-
} อื่น {
//แก้ไขให้อยู่ในตำแหน่งที่เหมาะสม
iLeft = Math.max(Math.min(iLeft, maxLeft), 0);
iTop = Math.max(Math.min(iTop, maxTop), 0);
-
-
//กำหนดตำแหน่งและแสดงผล
this._cssTip.left = iLeft + scrollLeft - this._offsetleft + "px";
this._cssTip.top = iTop + scrollTop - this._offsettop + "px";
this._cssTip.visibility = "มองเห็นได้";
//ie6 จัดการเลือก
ถ้า (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";
นี้._iframe.style.display = "";
-
//ซ่อนโหมดทริกเกอร์
trigger.TouchHide && addEvent(this.Tip, "mouseout", this._fTH);
-
// รับด้านซ้ายขององค์ประกอบทริกเกอร์สัมพันธ์
GetLeft: ฟังก์ชั่น (แก้ไข, จัดตำแหน่ง) {
สวิตช์ (align.toLowerCase()) {
กรณี "ซ้าย" :
กลับ rect.left - this.Tip.offsetWidth;
กรณี "ลูกค้าซ้าย" :
กลับทางขวา;
กรณี "ศูนย์" :
กลับ (rect.left + rect.right - this.Tip.offsetWidth)/2;
กรณี "ลูกค้า" :
กลับ rect.right - this.Tip.offsetWidth;
กรณี "ถูกต้อง" :
ค่าเริ่มต้น :
กลับทางขวา;
-
-
// รับค่าสูงสุดที่สัมพันธ์กับองค์ประกอบทริกเกอร์
GetTop: ฟังก์ชั่น (rect, valign) {
สวิตช์ (valign.toLowerCase()) {
กรณี "บน" :
กลับ rect.top - this.Tip.offsetHeight;
กรณี "ไคลเอนต์ท็อป" :
กลับทางตรงด้านบน;
กรณี "ศูนย์" :
กลับ (rect.top + rect.bottom - this.Tip.offsetHeight)/2;
กรณี "clientbottom" :
กลับ rect.bottom - this.Tip.offsetHeight;
กรณี "ด้านล่าง" :
ค่าเริ่มต้น :
กลับทางตรงด้านล่าง;
-
-
//เตรียมซ่อนตัว
ReadyHide: ฟังก์ชั่น (ล่าช้า) {
clearTimeout(this._timer);
ถ้า (ล่าช้า) {
this._timer = setTimeout (ผูก (สิ่งนี้ this.Hide), this._trigger.HideDelay);
} อื่น ๆ { this.Hide( };
-
//ซ่อน
ซ่อน: ฟังก์ชั่น() {
clearTimeout(this._timer);
//ตั้งค่าให้ซ่อน
this._cssTip.visibility = "ซ่อน";
this._cssTip.left = this._cssTip.top = "-9999px";
//ie6 จัดการเลือก
ถ้า (isIE6) { this._iframe.style.display = "none";
//ประมวลผลวัตถุทริกเกอร์
ถ้า (!!this._trigger) {
นี้._trigger.onHide();
RemoveEvent(this._trigger.Elem, "mouseout", this._fTH);
-
นี้._trigger = โมฆะ;
//ลบกิจกรรม
RemoveEvent(this.Tip, "mouseout", this._fTH);
RemoveEvent(เอกสาร "คลิก", this._fCH);
-
//เพิ่มวัตถุทริกเกอร์
เพิ่ม: ฟังก์ชั่น (องค์ประกอบ ตัวเลือก) {
//สร้างวัตถุทริกเกอร์
var elem = $$(elem), trigger = ขยาย(ขยาย ({ Elem: elem }, this.options), ตัวเลือก || {});
//คลิกเพื่อแสดง
addEvent (องค์ประกอบ, "คลิก", BindAsEventListener (สิ่งนี้, ฟังก์ชั่น (e) {
ถ้า (ทริกเกอร์ ClickShow) {
ถ้า (this.CheckShow (ทริกเกอร์)) {
นี้.ReadyShow(ทริกเกอร์.ClickShowDelay);
} อื่น {
clearTimeout(this._timer);
-
-
-
// การแสดงผลโหมดทริกเกอร์
addEvent(elem, "mouseover", BindAsEventListener(นี่, ฟังก์ชัน(e){
ถ้า (ทริกเกอร์ TouchShow) {
ถ้า (this.CheckShow (ทริกเกอร์)) {
นี้.ReadyShow(ทริกเกอร์.TouchShowDelay);
} อื่น ๆ ถ้า (this.Check (e. relatedTarget)) {
clearTimeout(this._timer);
-
-
-
//ส่งคืนวัตถุทริกเกอร์
ทริกเกอร์กลับ;
-
//แสดงเช็ค
CheckShow: ฟังก์ชั่น (ทริกเกอร์) {
ถ้า (ทริกเกอร์ !== this._trigger) {
//หากไม่ใช่วัตถุทริกเกอร์เดียวกัน ให้ดำเนินการ Hide ก่อนเพื่อป้องกันความขัดแย้ง
this.Hide(); this._trigger = ทริกเกอร์ คืนค่า จริง;
} อื่น ๆ { กลับเท็จ; };
-
//ซ่อนเช็ค
ตรวจสอบซ่อน: ฟังก์ชั่น () {
ถ้า (this._cssTip.visibility === "ซ่อน") {
//แต่เดิมเป็นสถานะที่ซ่อนอยู่ ไม่จำเป็นต้องดำเนินการ Hide อีกต่อไป
clearTimeout(this._timer);
RemoveEvent(this._trigger.Elem, "mouseout", this._fTH);
นี้._trigger = โมฆะ;
RemoveEvent(เอกสาร "คลิก", this._fCH);
กลับเท็จ;
} อื่น ๆ { กลับจริง;
-
-
</สคริปต์>
</หัว>
<ร่างกาย>
<สไตล์>
.trigger{border:1px solid #003099; color:#003099; พื้นหลัง:#e2e7ff; width:200px;
.tip{border:1px solid #c00000; color:#c00000; พื้นหลัง:#ffcccc;
</สไตล์>
<div style="padding:50px;">
<div id="idTip" class="tip"></div>
<div id="idTrigger1" class="trigger">
<เลือก>
<ตัวเลือก>ทดสอบ</ตัวเลือก>
</เลือก>
</div>
<br>
ตำแหน่งแนวนอน:
<ฉลาก>
<input name="nAlign" type="radio" value="left" />
ซ้าย </ฉลาก>
<ฉลาก>
<input name="nAlign" type="radio" value="clientleft" />
ลูกค้าซ้าย </label>
<ฉลาก>
<input name="nAlign" type="radio" value="center" />
กึ่งกลาง </ฉลาก>
<ฉลาก>
<input name="nAlign" type="radio" value="clientright" />
สิทธิ์ลูกค้า </label>
<ฉลาก>
<ชื่ออินพุต = "nAlign" ประเภท = "วิทยุ" ค่า = "ขวา" ตรวจสอบ = "ตรวจสอบ" />
ขวา </ฉลาก>
<br>
ตำแหน่งแนวตั้ง:
<ฉลาก>
<ชื่ออินพุต = "nVAlign" type = "วิทยุ" ค่า = "ด้านบน" />
ด้านบน </ฉลาก>
<ฉลาก>
<input name="nVAlign" type="radio" value="clienttop" />
ไคลเอนต์ท็อป </label>
<ฉลาก>
<ชื่ออินพุต = "nVAlign" type = "วิทยุ" value = "center" />
ตรงกลาง </ฉลาก>
<ฉลาก>
<ชื่ออินพุต = "nVAlign" type = "วิทยุ" value = "clientbottom" />
ลูกค้าด้านล่าง </label>
<ฉลาก>
<input name="nVAlign" type="radio" value="bottom"checked="checked" />
ด้านล่าง </ฉลาก>
<br>
<br>
การกำหนดเป้าหมายเอง:
ซ้าย:
<input id="idLeft" type="text" size="5" value="0" maxlength="3" />
สูงสุด:
<input id="idTop" type="text" size="5" value="0" maxlength="3"/>
<br>
<br>
<input id="idClick" type="ช่องทำเครื่องหมาย" ตรวจสอบแล้ว="ตรวจสอบ" />
<label for="idClick">วิธีการคลิก</label>
<input id="idTouch" type="ช่องทำเครื่องหมาย" ตรวจสอบแล้ว="ตรวจสอบแล้ว" />
<label for="idTouch">วิธีการทริกเกอร์</label>
<br>
<br>
เวลาล่าช้า:
<input id="idDelayTime" type="text" size="5" value="0" maxlength="4"/>
<input id="idDelay" type="button" value="ยกเลิกความล่าช้า" />
<br>
<br>
ตัวอย่างการใช้งานอื่นๆ: <br>
<br>
<div id="idTest1"> ใช้ชื่อ: <a href=" http://www.cnblogs.com/cloudgamer/archive/2008/11/17/1334778.html " title="ลากและวางเอฟเฟกต์"> ลาก และวางเอฟเฟกต์</a> <a href=" http://www.cnblogs.com/cloudgamer/archive/2008/12/03/1346386.html " title="Drag and Zoom Effect"> ลากและซูม เอฟเฟกต์</a > <a href=" http://www.cnblogs.com/cloudgamer/archive/2008/07/21/1247267.html " title="เอฟเฟกต์การตัดรูปภาพ"> เอฟเฟกต์การตัดรูปภาพ</a > </div >
<br>
<br>
เอฟเฟกต์การแสดงอวตารยอดนิยม: <br>
<br>
<div id="idTest2"> <a href=" http://www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html " title="เอฟเฟกต์การสลับการเลื่อนรูปภาพ"> <img src= "/articleimg/2009/07/6852/r_mx1.jpg" border="0"/></a> <a href=" http://www.cnblogs.com/cloudgamer/archive/2008/05/ 23/1205642.html " title="เอฟเฟกต์การแปลงรูปภาพ"><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="เอฟเฟกต์การแสดงภาพแบบเลื่อน"><img src="/articleimg/2009/07/6852/r_mx3.jpg " border="0"/></a> </div>
<br>
<br>
ปุ่มปิด: <a id="idTest3" href=" http://www.cnblogs.com/cloudgamer/archive/2009/05/18/TableFixed.html">เอฟเฟกต์การวางตำแหน่งแถวตาราง </a>
</div>
<สคริปต์>
var forEach = function(array, callback, thisObject){
ถ้า (array.forEach){
array.forEach (โทรกลับ thisObject);
}อื่น{
สำหรับ (var i = 0, len = array.length; i <len; i++) { callback.call(thisObject, array[i], i, array);
-
-
-
var ft = FixTips ใหม่ ("idTip");
-
var trigger1 = ft.Add("idTrigger1", {
onShow: ฟังก์ชั่น(){
//ทดสอบตำแหน่ง
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 |.0;
this.Custom.top = $$("idTop").value |.0;
trigger1.ShowDelay = trigger1.HideDelay = $$("idDelayTime").value |. 0 ||.
ft.Tip.innerHTML = sAlign + "<br>" + sVAlign + "<br>" + "left: " + this.Custom.left + ", ด้านบน: " + this.Custom.top;
-
-
//ทดสอบความล่าช้า
$$("idDelayTime").value = trigger1.ShowDelay;
$$("idDelay").onclick = function(){
ถ้า (trigger1.TouchShowDelay){
trigger1.ClickShowDelay = trigger1.ClickHideDelay =
trigger1.TouchShowDelay = trigger1.TouchHideDelay = เท็จ;
$$("idDelayTime").ปิดการใช้งาน = จริง;
this.value = "ตั้งค่าการหน่วงเวลา";
}อื่น{
trigger1.ClickShowDelay = trigger1.ClickHideDelay =
trigger1.TouchShowDelay = trigger1.TouchHideDelay = จริง;
$$("idDelayTime").ปิดการใช้งาน = false;
this.value = "ยกเลิกความล่าช้า";
-
-
//ทดสอบวิธี
$$("idClick").onclick = function(){
trigger1.ClickShow = trigger1.ClickHide = this.checked;
-
$$("idTouch").onclick = function(){
trigger1.TouchShow = trigger1.TouchHide = this.checked;
-
-
forEach($$("idTest1").getElementsByTagName("a"), ฟังก์ชัน(o){
var title = o.title; o.title = "";
ft.Add(o, { vAlign: "bottom", เปอร์เซ็นต์: { left: 50, top: 0 }, onShow: function(){ ft.Tip.innerHTML = title; } });
-
-
forEach($$("idTest2").getElementsByTagName("a"), ฟังก์ชัน(o){
var img = o.getElementsByTagName("img")[0], title = o.title;
o.title = "";
ft.Add (img, { กำหนดเอง: { ซ้าย: -6, ด้านบน: -6 },
onShow: ฟังก์ชั่น(){
var str = '<a href="' + o.href + '"><img src="' + img.src + '" style="padding-bottom:5px;" เส้นขอบ = "0"/></ ก>';
str += '<br /><a href="' + o.href + '">' + ชื่อ + '</a>';
ft.Tip.innerHTML = str;
-
-
-
-
ft.Add("idTest3", { ClickHide: false, TouchHide: false, Align: "right",
onShow: ฟังก์ชั่น(){
var str = ' <a href=" http://www.cnblogs.com/cloudgamer/archive/2009/03/11/1408333.html "> เอฟเฟกต์การไล่ระดับสีและการไล่ระดับสี</a><br />';
str += ' <a href=" http://www.cnblogs.com/cloudgamer/archive/2008/10/20/1314766.html "> ดิสก์เครือข่ายเลียนแบบ 163 ไม่มีระบบอัปโหลดไฟล์รีเฟรช</a><br / >';
str += '<input type="button" onclick="ft.Hide();" value="คลิกเพื่อปิด" />';
ft.Tip.innerHTML = str;
-
-
</สคริปต์>
</ร่างกาย>
</html>
JavaScript, การวางตำแหน่ง, ลอยตัว, เคล็ดลับ, เคล็ดลับเครื่องมือ, เคล็ดลับคงที่, เคล็ดลับ
คำอธิบายโปรแกรม
เคล็ดลับวัตถุ :
อ็อบเจ็กต์ Tip เป็นคอนเทนเนอร์ที่ใช้เพื่อแสดงข้อมูลที่พร้อมท์ และโปรแกรมจะแสดงด้วยแอตทริบิวต์ Tip ไม่มีข้อกำหนดสำหรับสิ่งนี้ การตั้งค่าบางอย่างจะเกิดขึ้นเมื่อเริ่มต้นโปรแกรม
ขั้นแรกให้ทำการตั้งค่าต่อไปนี้:
นี้._cssTip.margin = 0;
this._cssTip.position = "สัมบูรณ์";
this._cssTip.visibility = "ซ่อน";
this._cssTip.display = "บล็อก";
นี้._cssTip.zIndex = 99;
this._cssTip.left = this._cssTip.top = "-9999px";
ระยะขอบถูกตั้งค่าเป็น 0 เพื่อหลีกเลี่ยงปัญหาการวางตำแหน่ง การมองเห็นถูกใช้เพื่อซ่อนแทนการแสดงผล เนื่องจากโปรแกรมจำเป็นต้องได้รับ offsetWidth และ offsetHeight ของ Tip นอกจากนี้ยังต้องตั้งค่าด้านซ้ายและด้านบนเพื่อหลีกเลี่ยงไม่ให้แถบเลื่อนปรากฏขึ้นเนื่องจาก เคล็ดลับครอบครองพื้นที่
เนื่องจากเคล็ดลับอาจอยู่ภายในองค์ประกอบตำแหน่งอื่นๆ จึงต้องตั้งค่าพารามิเตอร์การแก้ไขออฟเซ็ตสองตัว:
var iLeft = iTop = 0, p = this.Tip.offsetParent;
ในขณะที่ (!(p === document.body || p === document.documentElement)) {
iLeft += p.offsetLeft; iTop += p.offsetTop;
-
this._offsetleft = iLeft;
this._offsettop = iTop;
สุดท้าย เพิ่มเหตุการณ์ลงในการวางเมาส์ของ Tip ซึ่งจะอธิบายในภายหลัง