Rumah hujung hadapan web tutorial js jquery 元素相对定位代码_jquery

jquery 元素相对定位代码_jquery

May 16, 2016 pm 06:18 PM
unsur kedudukan relatif

复制代码 代码如下:

/**
*jQuery rposition
*fix:要定位的元素
*rel:相对定位的元素
*options:{},align:左右对齐;vlign:垂直对齐;xleft:水平补给值;xleft:垂直补给值;adjust:是否相对窗口自动调整;rwindow:定位相对于窗口(align&vlign为center时垂直或水平居中);
*/
(function(win,$){
win.rposition=function(fix,rel,options){
var rectLeft,rectTop,rectH=fix.outerHeight(),rectW=fix.outerWidth(),wh=$(window).height(),ww=$(window).width(),
sT=$(document).scrollTop(),sL=$(document).scrollLeft(),
defaults={
align:"left",
vlign:"top",
xleft:0,
xtop:0,
adjust:true,
rwindow:false
},
options = $.extend(defaults, options);
var rectRel={
l:$(rel).offset().left,
t:$(rel).offset().top,
w:$(rel).outerWidth(),
h:$(rel).outerHeight()
};
switch(options.align){
case "left":
rectLeft=rectRel.l;break;
case "right":
rectLeft=rectRel.l+rectRel.w;break;
case "center":
rectLeft=rectRel.l+rectRel.w/2;break;
case "rleft":
rectLeft=rectRel.l-rectW;break;
default:
rectLeft=rectRel.l;
};
switch(options.vlign){
case "top":
rectTop=rectRel.t;break;
case "center":
rectTop=rectRel.t+rectRel.h/2;break;
case "vbottom":
rectTop=rectRel.t-rectH; break;
case "bottom":
default:
rectTop=rectRel.t+rectRel.h;
};
if(options.rwindow){
if(options.align=="center")rectLeft=(ww-rectW)/2+sL;
if(options.vlign=="center")rectTop=(wh-rectH)/2+sT;
};
if(options.adjust){
if(rectLeft+rectW>ww+sL){rectLeft-=(rectLeft+rectW)-(ww+sL)}
if(rectTop+rectH>wh+sT){rectTop=rectRel.t-rectH;}
};
$(fix).css({"left":rectLeft+options.xleft,"top":rectTop+options.xtop});
}
})(window,jQuery)
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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Adakah kedudukan melekit terlepas daripada aliran dokumen? Adakah kedudukan melekit terlepas daripada aliran dokumen? Feb 20, 2024 pm 05:24 PM

Adakah kedudukan melekit menjauhkan diri daripada aliran dokumen Contoh kod khusus diperlukan dalam pembangunan web, reka letak adalah topik yang sangat penting. Antaranya, positioning merupakan salah satu teknik susun atur yang biasa digunakan. Dalam CSS, terdapat tiga kaedah penentududukan biasa: kedudukan statik, kedudukan relatif dan kedudukan mutlak. Selain ketiga-tiga kaedah penentududukan ini, terdapat juga kaedah penentududukan yang lebih istimewa iaitu pelekatan kedudukan. Jadi, adakah kedudukan melekit terlepas daripada aliran dokumen? Mari bincangkannya secara terperinci di bawah dan berikan beberapa contoh kod untuk membantu memahami. Pertama, kita perlu memahami apa itu aliran dokumen

sintaks atribut bawah dalam CSS sintaks atribut bawah dalam CSS Feb 21, 2024 pm 03:30 PM

Contoh sintaks atribut dan kod bawah dalam CSS Dalam CSS, atribut bawah digunakan untuk menentukan jarak antara elemen dan bahagian bawah bekas. Ia mengawal kedudukan elemen berbanding bahagian bawah elemen induknya. Sintaks atribut bawah adalah seperti berikut: elemen{bottom:value;} dengan elemen mewakili elemen yang gaya akan digunakan dan nilai mewakili nilai bawah yang akan ditetapkan. nilai boleh menjadi nilai panjang tertentu, seperti piksel

Transformasi CSS: bagaimana untuk mencapai kesan putaran elemen Transformasi CSS: bagaimana untuk mencapai kesan putaran elemen Nov 21, 2023 pm 06:36 PM

Transformasi CSS: Cara untuk mencapai kesan putaran elemen memerlukan contoh kod khusus Dalam reka bentuk web, kesan animasi adalah salah satu cara penting untuk meningkatkan pengalaman pengguna dan menarik perhatian pengguna, dan animasi putaran adalah salah satu yang lebih klasik. Dalam CSS, anda boleh menggunakan atribut "transform" untuk mencapai pelbagai kesan ubah bentuk elemen, termasuk putaran. Artikel ini akan memperkenalkan secara terperinci cara menggunakan "transform" CSS untuk mencapai kesan putaran elemen, dan memberikan contoh kod khusus. 1. Cara menggunakan "transf" CSS

Kesan peralihan CSS: bagaimana untuk mencapai kesan gelongsor elemen Kesan peralihan CSS: bagaimana untuk mencapai kesan gelongsor elemen Nov 21, 2023 pm 01:16 PM

Kesan peralihan CSS: Bagaimana untuk mencapai kesan gelongsor elemen Pengenalan: Dalam reka bentuk web, kesan dinamik elemen boleh meningkatkan pengalaman pengguna, antaranya kesan gelongsor adalah kesan peralihan yang biasa dan popular. Melalui sifat peralihan CSS, kita boleh mencapai kesan animasi gelongsor elemen dengan mudah. Artikel ini akan memperkenalkan cara menggunakan sifat peralihan CSS untuk mencapai kesan gelongsor elemen dan menyediakan contoh kod khusus untuk membantu pembaca memahami dan menggunakan dengan lebih baik. 1. Pengenalan kepada peralihan atribut CSS peralihan atribut peralihan CSS tra

Bagaimana untuk meletakkan elemen dalam css Bagaimana untuk meletakkan elemen dalam css Apr 26, 2024 am 10:24 AM

Terdapat empat kaedah penentududukan elemen CSS: kedudukan statik, relatif, mutlak dan tetap. Kedudukan statik adalah lalai dan elemen tidak dipengaruhi oleh peraturan kedudukan. Kedudukan relatif menggerakkan elemen relatif kepada dirinya sendiri tanpa menjejaskan aliran dokumen. Kedudukan mutlak mengalih keluar elemen daripada aliran dokumen dan meletakkannya secara relatif kepada unsur nenek moyangnya. Kedudukan tetap meletakkan elemen berbanding dengan port pandangan, sentiasa mengekalkannya dalam kedudukan yang sama pada skrin.

Bagaimana untuk memusatkan kotak dalam html5 Bagaimana untuk memusatkan kotak dalam html5 Apr 05, 2024 pm 12:27 PM

Untuk memusatkan kotak dalam HTML5, terdapat kaedah berikut: pemusatan mendatar: text-align: centermargin: autodisplay: flex; kedudukan: mutlak;

Penjelasan terperinci tentang pengekodan kedudukan putaran RoPE yang biasa digunakan dalam model bahasa besar: mengapa ia lebih baik daripada pengekodan kedudukan mutlak atau relatif? Penjelasan terperinci tentang pengekodan kedudukan putaran RoPE yang biasa digunakan dalam model bahasa besar: mengapa ia lebih baik daripada pengekodan kedudukan mutlak atau relatif? Apr 01, 2024 pm 08:19 PM

Sejak kertas "AttentionIsAllYouNeed" diterbitkan pada 2017, seni bina Transformer telah menjadi asas kepada bidang pemprosesan bahasa semula jadi (NLP). Reka bentuknya sebahagian besarnya kekal tidak berubah selama bertahun-tahun, dengan 2022 menandakan perkembangan besar dalam bidang dengan pengenalan Pengekodan Kedudukan Putar (RoPE). Benam kedudukan diputar ialah teknik benam kedudukan NLP terkini. Model bahasa berskala besar yang paling popular (seperti Llama, Llama2, PaLM dan CodeGen) sudah menggunakannya. Dalam artikel ini, kami akan menyelami lebih mendalam tentang pengekodan kedudukan putaran dan cara pengekodan ini menggabungkan dengan kemas manfaat daripada benam kedudukan mutlak dan relatif. Keperluan untuk pengekodan kedudukan untuk memahami Ro

Cara melaksanakan susun atur dengan menu navigasi tetap menggunakan HTML dan CSS Cara melaksanakan susun atur dengan menu navigasi tetap menggunakan HTML dan CSS Oct 26, 2023 am 11:02 AM

Cara menggunakan HTML dan CSS untuk melaksanakan susun atur dengan menu navigasi tetap Dalam reka bentuk web moden, menu navigasi tetap adalah salah satu susun atur biasa. Ia boleh memastikan menu navigasi sentiasa berada di bahagian atas atau sisi halaman, membolehkan pengguna menyemak imbas kandungan web dengan mudah. Artikel ini akan memperkenalkan cara menggunakan HTML dan CSS untuk melaksanakan reka letak dengan menu navigasi tetap dan memberikan contoh kod khusus. Mula-mula, anda perlu mencipta struktur HTML untuk membentangkan kandungan halaman web dan menu navigasi. Berikut adalah contoh mudah

See all articles