Home Web Front-end JS Tutorial jquery 元素相对定位代码_jquery

jquery 元素相对定位代码_jquery

May 16, 2016 pm 06:18 PM
element relative positioning

复制代码 代码如下:

/**
*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)
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1664
14
PHP Tutorial
1268
29
C# Tutorial
1246
24
Does sticky positioning break away from the document flow? Does sticky positioning break away from the document flow? Feb 20, 2024 pm 05:24 PM

Does sticky positioning break away from the document flow? Specific code examples are needed. In web development, layout is a very important topic. Among them, positioning is one of the commonly used layout techniques. In CSS, there are three common positioning methods: static positioning, relative positioning and absolute positioning. In addition to these three positioning methods, there is also a more special positioning method, namely sticky positioning. So, does sticky positioning break away from the document flow? Let’s discuss it in detail below and provide some code examples to help understand. First, we need to understand what document flow is

CSS transition effect: how to achieve the sliding effect of elements CSS transition effect: how to achieve the sliding effect of elements Nov 21, 2023 pm 01:16 PM

CSS transition effect: How to achieve the sliding effect of elements Introduction: In web design, the dynamic effect of elements can improve the user experience, among which the sliding effect is a common and popular transition effect. Through the transition property of CSS, we can easily achieve the sliding animation effect of elements. This article will introduce how to use CSS transition properties to achieve the sliding effect of elements, and provide specific code examples to help readers better understand and apply. 1. Introduction to CSS transition attribute transition CSS transition attribute tra

How to center the box in html5 How to center the box in html5 Apr 05, 2024 pm 12:27 PM

To center the box in HTML5, there are the following methods: horizontal centering: text-align: centermargin: autodisplay: flex; justify-content: center; vertical centering: vertical-align: middletransform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

How to position elements in css How to position elements in css Apr 26, 2024 am 10:24 AM

There are four methods of CSS element positioning: static, relative, absolute, and fixed positioning. Static positioning is the default and the element is not affected by positioning rules. Relative positioning moves an element relative to itself without affecting document flow. Absolute positioning removes an element from the document flow and positions it relative to its ancestor elements. Fixed positioning positions an element relative to the viewport, always keeping it in the same position on the screen.

bottom attribute syntax in CSS bottom attribute syntax in CSS Feb 21, 2024 pm 03:30 PM

Bottom attribute syntax and code examples in CSS In CSS, the bottom attribute is used to specify the distance between an element and the bottom of the container. It controls the position of an element relative to the bottom of its parent element. The syntax of the bottom attribute is as follows: element{bottom:value;} where element represents the element to which the style is to be applied, and value represents the bottom value to be set. value can be a specific length value, such as pixels

What are relative positioning technologies? What are relative positioning technologies? Oct 19, 2023 pm 05:42 PM

Relative positioning technologies include radio ranging, sonar, laser ranging, cameras, inertial navigation, satellite navigation, indoor positioning, ultrasonic, infrared, electromagnetic waves, Bluetooth positioning, Wi-Fi positioning, ultrasonic ranging, infrared ranging, and laser ranging. , camera visual positioning, RSSI-based positioning, TOA-based positioning, TDOA-based positioning, AOA-based positioning, etc. Detailed introduction: 1. Radio ranging: Calculate the distance by measuring the time difference of radio waves from the transmitting point to the receiving point; 2. Sonar technology, etc.

CSS transformation: how to achieve the rotation effect of elements CSS transformation: how to achieve the rotation effect of elements Nov 21, 2023 pm 06:36 PM

CSS transformation: How to achieve the rotation effect of elements requires specific code examples. In web design, animation effects are one of the important ways to improve user experience and attract user attention, and rotation animation is one of the more classic ones. In CSS, you can use the "transform" attribute to achieve various deformation effects of elements, including rotation. This article will introduce in detail how to use CSS "transform" to achieve the rotation effect of elements, and provide specific code examples. 1. How to use CSS’s “transf

How to use CSS to achieve an element's transparency gradient effect How to use CSS to achieve an element's transparency gradient effect Nov 21, 2023 pm 01:38 PM

How to use CSS to achieve the transparency gradient effect of elements In web development, adding transition effects to web page elements is one of the important means to improve user experience. The gradient effect of transparency can not only make the page smoother, but also highlight the key content of the element. This article will introduce how to use CSS to achieve the transparency gradient effect of elements and provide specific code examples. Using the CSS transition attribute To achieve the transparency gradient effect of an element, we need to use the CSS transition attribute. t

See all articles