jquery 元素相对定位代码_jquery
/**
*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)

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

黏性定位脫離文件流嗎,需要具體程式碼範例在Web開發中,佈局是一個很重要的主題。其中,定位是一種常用的佈局技術之一。在CSS中,有三種常見的定位方式:靜態定位、相對定位和絕對定位。除了這三種定位方式,還有一種比較特殊的定位方式,就是黏性定位。那麼,黏性定位是否脫離文檔流呢?下面我們就來具體探討一下,並提供一些程式碼範例來幫助理解。首先,我們要先了解什麼是文檔流

CSS過渡效果:如何實現元素的滑動效果引言:在網頁設計中,元素的動態效果能夠提升使用者體驗,其中滑動效果是常見而又受歡迎的過渡效果。透過CSS的過渡屬性,我們可以輕鬆實現元素的滑動動畫效果。本文將介紹如何使用CSS過渡屬性來實現元素的滑動效果,並提供具體的程式碼範例,以幫助讀者更好地理解和應用。一、CSS過渡屬性transition的簡介CSS過渡屬性tra

在HTML5 中讓盒子居中,有以下方法:水平居中:text-align: centermargin: autodisplay: flex; justify-content: center;垂直居中:vertical-align: middletransform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

CSS 元素定位有四種方法:靜態、相對、絕對和固定定位。靜態定位是預設值,元素不受定位規則影響。相對定位相對於元素本身移動元素,不會影響文件流。絕對定位將元素從文件流中移除並相對於其祖先元素定位。固定定位將元素相對於視窗定位,始終保持在螢幕上的相同位置。

CSS中bottom屬性語法及程式碼範例在CSS中,bottom屬性用於指定一個元素與容器底部之間的距離。它可以控制一個元素相對於其父元素底部的位置。 bottom屬性的語法如下:element{bottom:value;}其中,element表示要套用該樣式的元素,value表示要設定的bottom值。 value可以是一個具體的長度值,例如像素

相對定位技術有無線電測距、聲音吶、雷射測距、攝影機、慣性導航、衛星導航、室內定位、超音波、紅外線、電磁波、藍牙定位、Wi-Fi定位、超音波測距、紅外線測距、雷射測距、相機視覺定位、基於RSSI的定位、基於TOA的定位、基於TDOA的定位、基於AOA的定位等等。詳細介紹:1、無線電測距:透過測量無線電波從發射點到接收點的時間差來計算距離;2、聲吶技術等等。

CSS變形:如何實現元素的旋轉效果,需要具體程式碼範例在網頁設計中,動畫效果是提高使用者體驗和吸引使用者註意力的重要方式之一,而旋轉動畫是其中比較經典的一種。在CSS中,使用「transform」屬性可以實現元素的各種變形效果,包括旋轉。本文將詳細介紹如何利用CSS的「transform」實現元素的旋轉效果,並提供具體的程式碼範例。一、如何使用CSS的「transf

如何使用CSS實現元素的透明漸變效果在Web開發中,為網頁元素添加過渡效果是提升使用者體驗的重要手段之一。透明度的漸層效果不僅可以使頁面變得更加平滑,還可以突出元素的重點內容。本文將介紹如何使用CSS實現元素的透明度漸變效果,並提供具體的程式碼範例。使用CSS的transition屬性要實現元素的透明度漸變效果,我們需要使用CSS的transition屬性。 t
