Saya awalnya ingin membuat efek tooltips yang menggabungkan posisi mengambang dan mengikuti mouse, tapi saya menemukan bahwa posisi dan mengikuti mouse masih berbeda di beberapa tempat utama, jadi kita harus melakukannya secara terpisah.
Efek ini sendiri tidak terlalu sulit. Kami terutama berupaya pada struktur dan perluasan program agar lebih nyaman digunakan dan dapat digunakan di lebih banyak tempat.
Fitur program
Contoh download lengkap (klik untuk mendownload)
<!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 ">
<kepala>
<meta http-equiv="Jenis Konten" content="teks/html; charset=gb2312" />
<title>Efek perintah pemosisian mengambang JavaScript</title>
<skrip>
var $$ = fungsi (id) {
kembalikan "string" == tipe id ? dokumen.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;
// dengan masukan dari Tino Zijdel, Matthias Miller, Diego Perini
// http://dean.edwards.name/weblog/2005/10/add-event/
fungsi addEvent(elemen, tipe, pengendali) {
if (elemen.addEventListener) {
elemen.addEventListener(tipe, penangan, false);
} kalau tidak {
if (!handler.$$guid) handler.$$guid = addEvent.guid++;
if (!element.events) elemen.events = {};
var handler = elemen.events[type];
jika (!penanganan) {
penangan = elemen.acara[tipe] = {};
if (elemen["pada" + ketik]) {
penangan[0] = elemen["aktif" + tipe];
}
}
handlers[handler.$$guid] = penangan;
elemen["aktif" + ketik] = handleEvent;
}
};
addEvent.guid = 1;
fungsi hapusEvent(elemen, tipe, pengendali) {
if (elemen.removeEventListener) {
elemen.removeEventListener(tipe, penangan, false);
} kalau tidak {
if (elemen.acara && elemen.acara[tipe]) {
hapus elemen.events[type][handler.$$guid];
}
}
};
fungsi handleEvent(acara) {
var returnValue = benar;
acara = acara ||.fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);
var handler = ini.events[event.type];
untuk (var i di penangan) {
this.$$handleEvent = penangan[i];
if (ini.$$handleEvent(event) === false) {
returnValue = salah;
}
}
kembali returnValue;
};
fungsi fixEvent(acara) {
acara.target = acara.srcElement;
if(event.type == "mouseout") {
acara.relatedTarget = acara.toElement;
}else if(event.type == "mouseover") {
event.relatedTarget = acara.fromElement;
}
acara pengembalian;
};
var Perluas = fungsi(tujuan, sumber) {
for (properti var di sumber) {
tujuan[properti] = sumber[properti];
}
tujuan kembali;
}
var Berisi = fungsi(a, b){
kembalikan a.berisi ?
}
var Bind = fungsi(objek, kesenangan) {
var args = Array.prototype.slice.call(argumen, 2);
fungsi kembali() {
return fun.apply(object, args.concat(Array.prototype.slice.call(arguments)));
}
}
var BindAsEventListener = function(objek, kesenangan) {
var args = Array.prototype.slice.call(argumen, 2);
fungsi kembali (peristiwa) {
return fun.apply(objek, [peristiwa].concat(args));
}
}
var FixedTips = fungsi(tip, opsi){
this.Tip = $$(tip);//Kotak prompt
this._trigger = null;//Objek pemicu
this._timer = null;//Timer
this._cssTip = this.Tip.style;//Kode yang disederhanakan
this._onshow = false;//Rekam status tampilan saat ini
this.SetOptions(pilihan);
//Objek Tip Proses
this._cssTip.margin = 0;//Hindari masalah penentuan posisi
this._cssTip.position = "mutlak";
this._cssTip.visibility = "tersembunyi";
this._cssTip.display = "blok";
this._cssTip.zIndex = 99;
this._cssTip.left = this._cssTip.top = "-9999px";//Hindari bilah gulir di placeholder
//mengimbangi parameter koreksi
var iLeft = iTop = 0, p = ini.Tip;
while (p.offsetParent) {
p = p.offsetParent; iLeft += p.offsetLeft; iTop += p.offsetTop;
};
this._offsetleft = iLeft;
ini._offsettop = iTop;
//Terus tampilkan saat berpindah ke objek Tip
addEvent(ini.Tip, "mouseover", BindAsEventListener(ini, fungsi(e){
//Jika ada elemen luar yang masuk, berarti sedang dalam tahap penundaan penyembunyian, lalu kosongkan pengatur waktu untuk membatalkan penyembunyian.
this.Check(e.relatedTarget) && clearTimeout(this._timer);
}));
//ie6 menangani pilihan
jika (adalahIE6) {
this._iframe = document.createElement("<iframe style='position:absolute;filter:alpha(opacity=0);display:none;'>");
document.body.insertBefore(this._iframe, document.body.childNodes[0]);
};
//Digunakan untuk menyembunyikan dengan mengklik
this._fCH = BindAsEventListener(ini, fungsi(e) {
if (ini.Periksa(e.target) && ini.PeriksaSembunyikan()) {
ini.ReadyHide(ini._trigger.ClickHideDelay);
};
});
//Digunakan untuk memicu metode untuk bersembunyi
this._fTH = BindAsEventListener(ini, fungsi(e) {
if (ini.Periksa(e.Target terkait) && ini.CheckHide()) {
ini.ReadyHide(ini._trigger.TouchHideDelay);
};
});
};
Tips Tetap.prototipe = {
_doc: document.documentElement,//Sederhanakan kodenya
//Setel properti default
SetOptions: fungsi(opsi) {
this.options = {//Nilai default
ClickShow: true,//Apakah akan ditampilkan dalam mode klik
ClickShowDelay: false,//Apakah tampilan klik tertunda
ClickHide: benar,//Apakah mode klik disembunyikan
ClickHideDelay: false, // Apakah akan mengklik untuk menyembunyikan penundaan
TouchShow: benar,//Apakah mode pemicu ditampilkan
TouchShowDelay: benar,//Apakah akan memicu penundaan tampilan
TouchHide: benar,//Apakah mode pemicu disembunyikan
TouchHideDelay: true,//Apakah akan memicu penundaan sembunyikan
ShowDelay: 300,//Waktu tunda tampilan
HideDelay: 300,//Sembunyikan waktu tunda
Sejajarkan: "clientleft",//Posisi horizontal
vAlign: "clienttop",//posisi vertikal
Khusus: { kiri: 0, atas: 0 },//Pemosisian khusus
Persen: { kiri: 0, atas: 0 },//Posisi persentase yang disesuaikan
Adaptif: salah,//Apakah akan memposisikan adaptif
Reset: salah,//Apakah akan mengubah posisi selama pemosisian adaptif
onShow: function(){},//Jalankan saat menampilkan
onHide: function(){}//Dieksekusi saat disembunyikan
};
Perluas(opsi ini, opsi || {});
},
//Periksa elemen pemicu
Periksa: fungsi(elemen) {
//Kembalikan apakah itu elemen eksternal (yaitu, objek elemen selain elemen pemicu dan objek Tip itu sendiri serta elemen internalnya)
kembalikan !ini._pemicu ||
!(
ini.Tip === elemen ||. ini._trigger.Elem === elemen ||
Berisi(ini.Tip, elem) ||. Berisi(ini._trigger.Elem, elem)
);
},
//Siap untuk ditampilkan
ReadyShow: fungsi(penundaan) {
clearTimeout(ini._timer);
var trigger = ini._trigger;
//Klik untuk menyembunyikan
trigger.ClickHide && addEvent(dokumen, "klik", this._fCH);
//Mode pemicu disembunyikan
trigger.TouchHide && addEvent(this._trigger.Elem, "mouseout", this._fTH);
//Apakah akan menunda pemicuan
jika (penundaan) {
this._timer = setTimeout(Bind(ini, ini.Tampilkan), trigger.ShowDelay);
} else { ini.Tampilkan();
},
//menunjukkan
Tampilkan: fungsi() {
clearTimeout(ini._timer);
this._trigger.onShow();//Letakkan di depan untuk memudahkan modifikasi atribut
//Hitung kiri dan atas berdasarkan posisi preset dan posisi kustom
var trigger = this._trigger, rect = trigger.Elem.getBoundingClientRect(),
scrolldoc = isChrome ||.isSafari ?dokumen.body : ini._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;
//Penempatan persentase khusus
if (trigger.Percent.left) { iLeft += .01 * trigger.Percent.left * trigger.Elem.offsetWidth };
if (trigger.Percent.top) { iTop += .01 * trigger.Percent.top * trigger.Elem.offsetHeight };
//Pemosisian jendela adaptif
if (trigger.Adaptif) {
//Parameter posisi yang benar
var maxLeft = ini._doc.clientWidth - ini.Tip.offsetWidth,
maxTop = ini._doc.clientHeight - ini.Tip.offsetHeight;
if (pemicu.Reset) {
//Pemosisian ulang otomatis
jika (iLeft > maxLeft || iLeft < 0) {
iLeft = this.GetLeft(rect, 2 * iLeft > maxLeft ? "left" : "right") + customLeft;
};
jika (iTop > maxTop || iTop < 0) {
iTop = this.GetTop(rect, 2 * iTop > maxTop ? "top" : "bottom") + customTop;
};
} kalau tidak {
//Koreksi ke posisi yang sesuai
iLeft = Matematika.max(Matematika.min(iLeft, maxLeft), 0);
iTop = Matematika.max(Matematika.min(iTop, maxTop), 0);
};
};
//Atur posisi dan tampilan
this._cssTip.left = iLeft + scrollLeft - this._offsetleft + "px";
this._cssTip.top = iTop + scrollTop - ini._offsettop + "px";
this._cssTip.visibility = "terlihat";
//ie6 menangani pilihan
jika (adalahIE6) {
this._iframe.style.left = iLeft + scrollLeft + "px";
this._iframe.style.top = iTop + scrollTop + "px";
this._iframe.style.width = ini.Tip.offsetWidth + "px";
this._iframe.style.height = ini.Tip.offsetHeight + "px";
this._iframe.style.display = "";
};
//Mode pemicu disembunyikan
trigger.TouchHide && addEvent(ini.Tip, "mouseout", this._fTH);
},
//Dapatkan di sebelah kiri elemen pemicu relatif
GetLeft: function(lurus, rata) {
beralih (align.toLowerCase()) {
kasus "kiri" :
kembalikan rect.left - this.Tip.offsetWidth;
kasus "kiri klien" :
kembalikan lurus.kiri;
kasus "pusat" :
return (persegi.kiri + persegi.kanan - ini.Tip.offsetWidth)/2;
kasus "hak klien" :
kembalikan rect.right - this.Tip.offsetWidth;
kasus "benar":
bawaan :
return rect.kanan;
};
},
//Dapatkan nilai relatif teratas terhadap elemen pemicu
GetTop: function(lurus, valign) {
beralih (valign.toLowerCase()) {
kasus "atas" :
kembalikan rect.top - this.Tip.offsetHeight;
kasus "klientop" :
kembalikan rect.top;
kasus "pusat" :
return (persegi.atas + persegi.bawah - ini.Tip.offsetHeight)/2;
kasus "clientbottom" :
kembalikan rect.bottom - this.Tip.offsetHeight;
kasus "bawah" :
bawaan :
return rect.bottom;
};
},
//Bersiap untuk bersembunyi
ReadyHide: fungsi(penundaan) {
clearTimeout(ini._timer);
jika (penundaan) {
this._timer = setTimeout(Bind(ini, ini.Sembunyikan), ini._trigger.HideDelay);
} else { ini.Sembunyikan();
},
//bersembunyi
Sembunyikan: fungsi() {
clearTimeout(ini._timer);
//Siapkan untuk bersembunyi
this._cssTip.visibility = "tersembunyi";
this._cssTip.left = ini._cssTip.top = "-9999px";
//ie6 menangani pilihan
if (isIE6) { this._iframe.style.display = "tidak ada };
//Proses objek pemicu
jika (!!ini._pemicu) {
this._trigger.onHide();
hapusEvent(ini._trigger.Elem, "mouseout", ini._fTH);
}
this._trigger = null;
//hapus acara
hapusEvent(ini.Tip, "mouseout", this._fTH);
deleteEvent(dokumen, "klik", this._fCH);
},
//Tambahkan objek pemicu
Tambahkan: fungsi(elemen, opsi) {
//Buat objek pemicu
var elem = $$(elem), trigger = Extend(Extend({ Elem: elem }, this.options), options || {});
//Klik untuk menampilkan
addEvent(elem, "klik", BindAsEventListener(ini, fungsi(e){
if (trigger.ClickShow) {
if (ini.CheckShow(pemicu)) {
this.ReadyShow(trigger.ClickShowDelay);
} kalau tidak {
clearTimeout(ini._timer);
};
};
}));
//Tampilan mode pemicu
addEvent(elem, "mouseover", BindAsEventListener(ini, fungsi(e){
if (pemicu.TouchShow) {
if (ini.CheckShow(pemicu)) {
ini.ReadyShow(trigger.TouchShowDelay);
} else if (ini.Periksa(e.relatedTarget)) {
clearTimeout(ini._timer);
};
};
}));
//mengembalikan objek pemicu
pemicu kembali;
},
//Tampilkan cek
Pemeriksaan: fungsi(pemicu) {
if (pemicu !== this._trigger) {
//Jika objek pemicunya tidak sama, jalankan Hide terlebih dahulu untuk mencegah konflik.
this.Hide(); this._trigger = pemicu;
} lain { kembali salah };
},
//sembunyikan tanda centang
PeriksaSembunyikan: fungsi() {
if (this._cssTip.visibility === "tersembunyi") {
// Ini awalnya adalah keadaan tersembunyi, tidak perlu mengeksekusi Sembunyikan lagi
clearTimeout(ini._timer);
hapusEvent(ini._trigger.Elem, "mouseout", ini._fTH);
this._trigger = null;
deleteEvent(dokumen, "klik", this._fCH);
kembali salah;
} else { kembalikan benar };
}
};
</skrip>
</kepala>
<tubuh>
<gaya>
.trigger{border:1px solid #003099; warna:#003099; latar belakang:#e2e7ff; padding:10px lebar:200px tinggi:100px;
.tip{batas:1px solid #c00000; warna:#c00000; latar belakang:#ffcccc; padding:5px;
</gaya>
<div style="padding:50px;">
<div id="idTip" class="tip"></div>
<div id="idTrigger1" class="trigger">
<pilih>
<option>uji</option>
</pilih>
</div>
<br>
posisi horisontal:
<label>
<masukan nama="nAlign" type="radio" value="kiri" />
kiri </label>
<label>
<masukan nama="nAlign" type="radio" value="clientleft" />
kiri klien </label>
<label>
<masukan nama="nAlign" type="radio" value="pusat" />
tengah </label>
<label>
<masukan nama="nAlign" type="radio" value="clientright" />
hak klien </label>
<label>
<input nama="nAlign" type="radio" value="kanan" dicentang="dicentang" />
benar </label>
<br>
Posisi vertikal:
<label>
<masukan nama="nVAlign" type="radio" value="atas" />
atas </label>
<label>
<masukan nama="nVAlign" type="radio" value="clienttop" />
klientop </label>
<label>
<input nama="nVAlign" type="radio" value="pusat" />
tengah </label>
<label>
<masukan nama="nVAlign" type="radio" value="clientbottom" />
klien bawah </label>
<label>
<input nama="nVAlign" type="radio" value="bawah" dicentang="dicentang" />
bawah </label>
<br>
<br>
Penargetan khusus:
kiri:
<input id="idLeft" type="text" size="5" value="0" maxlength="3" />
atas:
<input id="idTop" type="text" size="5" value="0" maxlength="3"/>
<br>
<br>
<input id="idClick" type="checkbox" dicentang="dicentang" />
<label for="idClick">Metode klik</label>
<input id="idTouch" type="kotak centang" dicentang="dicentang" />
<label for="idTouch">Metode pemicu</label>
<br>
<br>
Waktu tunda:
<input id="idDelayTime" type="text" size="5" value="0" maxlength="4"/>
<input id="idDelay" type="button" value="Batalkan penundaan" />
<br>
<br>
Contoh aplikasi lainnya: <br>
<br>
<div id="idTest1"> Gunakan judul: <a href=" http://www.cnblogs.com/cloudgamer/archive/2008/11/17/1334778.html " title="Efek seret dan lepas"> Seret dan lepas Efek</a> <a href=" http://www.cnblogs.com/cloudgamer/archive/2008/12/03/1346386.html " title="Efek Seret dan Zoom"> Seret dan Zoom Efek</a > <a href=" http://www.cnblogs.com/cloudgamer/archive/2008/07/21/1247267.html " title="Efek pemotongan gambar"> Efek pemotongan gambar</a > </div >
<br>
<br>
Efek tampilan avatar populer: <br>
<br>
<div id="idTest2"> <a href=" http://www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html " title="Efek peralihan geser gambar"> <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="Efek transformasi gambar"><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="Efek tampilan geser gambar"><img src="/articleimg/2009/07/6852/r_mx3.jpg " perbatasan="0"/></a> </div>
<br>
<br>
Tombol tutup: <a id="idTest3" href=" http://www.cnblogs.com/cloudgamer/archive/2009/05/18/TableFixed.html">Efek pemosisian baris tabel </a>
</div>
<skrip>
var forEach = function(array, callback, thisObject){
if(array.forEach){
array.forEach(panggilan balik, thisObject);
}kalau tidak{
for (var i = 0, len = array.length; i < len; i++) { callback.call(thisObject, array[i], i, array }
}
}
///////////////////////////////////////////
var ft = Tips Tetap baru("idTip");
///////////////////////////////////////////
var trigger1 = ft.Tambahkan("idTrigger1", {
di acara: fungsi(){
//tes posisi
var sAlign = ini.Align, sVAlign = ini.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").nilai |.
this.Custom.top = $$("idTop").nilai |.
trigger1.ShowDelay = trigger1.HideDelay = $$("idDelayTime").nilai ||.
ft.Tip.innerHTML = sAlign + "<br>" + sVAlign + "<br>" + "kiri: " + this.Custom.left + ", atas: " + this.Custom.top;
}
});
//tes penundaan
$$("idDelayTime").value = trigger1.ShowDelay;
$$("idDelay").onclick = fungsi(){
if(trigger1.TouchShowDelay){
trigger1.ClickShowDelay = trigger1.ClickHideDelay =
trigger1.TouchShowDelay = trigger1.TouchHideDelay = salah;
$$("idDelayTime").disabled = benar;
this.value = "Setel penundaan";
}kalau tidak{
trigger1.ClickShowDelay = trigger1.ClickHideDelay =
trigger1.TouchShowDelay = trigger1.TouchHideDelay = benar;
$$("idDelayTime").disabled = salah;
this.value = "Batalkan penundaan";
}
}
//uji metode
$$("idClick").onclick = fungsi(){
trigger1.ClickShow = trigger1.ClickHide = ini.diperiksa;
}
$$("idTouch").onclick = fungsi(){
trigger1.TouchShow = trigger1.TouchHide = ini.diperiksa;
}
///////////////////////////////////////////
forEach($$("idTest1").getElementsByTagName("a"), function(o){
var judul = o.judul; o.judul = "";
ft.Add(o, { vAlign: "bawah", Persen: { kiri: 50, atas: 0 }, onShow: function(){ ft.Tip.innerHTML = judul; } });
})
///////////////////////////////////////////
forEach($$("idTest2").getElementsByTagName("a"), function(o){
var img = o.getElementsByTagName("img")[0], judul = o.judul;
o.judul = "";
ft.Add(img, { Kustom: { kiri: -6, atas: -6 },
di acara: fungsi(){
var str = '<a href="' + o.href + '"><img src="' + img.src + '" style="padding-bottom:5px;" border="0"/></ sebuah>';
str += '<br /><a href="' + o.href + '">' + judul + '</a>';
ft.Tip.innerHTML = str;
}
});
})
///////////////////////////////////////////
ft.Add("idTest3", { ClickHide: false, TouchHide: false, Align: "kanan",
di acara: fungsi(){
var str = ' <a href=" http://www.cnblogs.com/cloudgamer/archive/2009/03/11/1408333.html "> Gradien warna dan efek gradien</a><br />';
str += ' <a href=" http://www.cnblogs.com/cloudgamer/archive/2008/10/20/1314766.html "> Disk jaringan imitasi 163 tanpa penyegaran sistem pengunggahan file</a><br / >';
str += '<input type="button" onclick="ft.Hide();" value="Klik untuk menutup" />';
ft.Tip.innerHTML = str;
}
});
</skrip>
</tubuh>
</html>
JavaScript, pemosisian, mengambang, tip, keterangan alat, Tip Tetap, Tip
Deskripsi Program
Objek tip :
Objek Tip adalah wadah yang digunakan untuk menampilkan informasi cepat, dan program diwakili oleh atribut Tip. Tidak ada persyaratan untuk ini, beberapa pengaturan akan dibuat saat program diinisialisasi.
Pertama-tama buatlah pengaturan berikut:
this._cssTip.margin = 0;
this._cssTip.position = "mutlak";
this._cssTip.visibility = "tersembunyi";
this._cssTip.display = "blok";
this._cssTip.zIndex = 99;
this._cssTip.left = ini._cssTip.top = "-9999px";
Margin diatur ke 0 untuk menghindari beberapa masalah posisi. Visibilitas digunakan untuk menyembunyikan daripada menampilkan karena program perlu mendapatkan offsetWidth dan offsetHeight dari Tip Tip menempati ruang.
Karena Tip mungkin berada di dalam elemen posisi lain, dua parameter koreksi offset harus ditetapkan:
var iLeft = iTop = 0, p = ini.Tip.offsetParent;
while (!(p === document.body || p === document.documentElement)) {
iLeft += p.offsetLeft; iTop += p.offsetTop;
};
this._offsetleft = iLeft;
ini._offsettop = iTop;
Terakhir, tambahkan event ke gerakan mouse Tip, yang akan dijelaskan nanti.