Javascript代码

Rumah > hujung hadapan web > html tutorial > Gunakan CSS jquery mudah untuk mencipta tersuai tajuk teg tooltip_HTML/Xhtml_pengeluaran halaman web

Gunakan CSS jquery mudah untuk mencipta tersuai tajuk teg tooltip_HTML/Xhtml_pengeluaran halaman web

WBOY
Lepaskan: 2016-05-16 16:37:39
asal
1609 orang telah melayarinya

Pengenalan

Gunakan CSS jquery mudah untuk mencipta gesaan tajuk teg tersuai untuk menggantikan gelagat lalai penyemak imbas. Seperti yang ditunjukkan dalam gambar:



Kod Javascript

Salin kod
kod Seperti berikut:

$(function() { 
$("a[title ]"). each(function() {
var a = $(this);
var title = a.attr('title');
if (title == undefined || title == "") return ;
a.data('title', title)
.removeAttr('title')
.hover(
function () {
var offset = a.offset ();
$("
").appendTo($("body")).html(title).css({ atas: offset.top a.outerHeight( ) 10, kiri: offset.left a.outerWidth() 1 }).fadeIn(function () {
var pop = $(this);
setTimeout(function () { pop.remove (); } , pop.text().length*80); );
});
});


Jangan lupa petik JQuery.

SetTimeout(function () { pop.remove(); }, pop.text().length*80); dalam kod mengira masa gesaan berdasarkan panjang tajuk untuk mengelakkan gesaan tajuk terlalu pendek . Gesaan tajuk yang panjang atau terlalu panjang adalah terlalu pendek.

Kod CSS





Salin kod
Kod tersebut adalah seperti berikut: # anchortitlecontainer {
kedudukan: mutlak;
z-index: 5999;
border: solid 1px #315B6C; : tiada tatal ulang 0 0 #FFFFFF;
jejari sempadan: 5px;
paparan:
}
#anchortitlecontainer:sebelum {
kedudukan: mutlak; ;
kiri: -1px;
atas: -15px; kandungan: "";
paparan: blok;
lebar: 0; 0px;
atas: -13px;
warna sempadan: lut sinar #FFFFFF; 🎜> paparan: blok;
lebar: 0;
}


Gunakan beberapa ciri CSS3 dan elakkan menggunakan imej.

Saya bukan pakar CSS, jadi saya mengambil sedikit masa untuk melaraskan gaya ini Jika seseorang boleh menggunakannya, itu adalah penghormatan saya. :)
Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan