首页 web前端 js教程 jquery 元素相对定位代码_jquery

jquery 元素相对定位代码_jquery

May 16, 2016 pm 06:18 PM
元素 相对定位

复制代码 代码如下:

/**
*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)
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

粘性定位脱离文档流吗 粘性定位脱离文档流吗 Feb 20, 2024 pm 05:24 PM

粘性定位脱离文档流吗,需要具体代码示例在Web开发中,布局是一个很重要的话题。其中,定位是一种常用的布局技术之一。在CSS中,有三种常见的定位方式:静态定位、相对定位和绝对定位。除了这三种定位方式,还有一种比较特殊的定位方式,即粘性定位。那么,粘性定位是否脱离文档流呢?下面我们就来具体探讨一下,并提供一些代码示例来帮助理解。首先,我们需要了解一下什么是文档流

CSS中bottom属性语法 CSS中bottom属性语法 Feb 21, 2024 pm 03:30 PM

CSS中bottom属性语法及代码示例在CSS中,bottom属性用于指定一个元素与容器底部之间的距离。它可以控制一个元素相对于其父元素底部的位置。bottom属性的语法如下:element{bottom:value;}其中,element表示要应用该样式的元素,value表示要设置的bottom值。value可以是一个具体的长度值,比如像素

css中元素的定位方法 css中元素的定位方法 Apr 26, 2024 am 10:24 AM

CSS 元素定位有四种方法:静态、相对、绝对和固定定位。静态定位是默认值,元素不受定位规则影响。相对定位相对于元素本身移动元素,不会影响文档流。绝对定位将元素从文档流中移除并相对于其祖先元素定位。固定定位将元素相对于视口定位,始终保持在屏幕上的同一位置。

CSS过渡效果:如何实现元素的滑动效果 CSS过渡效果:如何实现元素的滑动效果 Nov 21, 2023 pm 01:16 PM

CSS过渡效果:如何实现元素的滑动效果引言:在网页设计中,元素的动态效果能够提升用户体验,其中滑动效果是一个常见而又受欢迎的过渡效果。通过CSS的过渡属性,我们可以轻松实现元素的滑动动画效果。本文将介绍如何使用CSS过渡属性来实现元素的滑动效果,并提供具体的代码示例,以帮助读者更好地理解和应用。一、CSS过渡属性transition的简介CSS过渡属性tra

CSS变形:如何实现元素的旋转效果 CSS变形:如何实现元素的旋转效果 Nov 21, 2023 pm 06:36 PM

CSS变形:如何实现元素的旋转效果,需要具体代码示例在网页设计中,动画效果是提高用户体验和吸引用户注意力的重要方式之一,而旋转动画是其中比较经典的一种。在CSS中,使用“transform”属性可以实现元素的各种变形效果,包括旋转。本文将详细介绍如何利用CSS的“transform”实现元素的旋转效果,并提供具体的代码示例。一、如何使用CSS的“transf

大语言模型中常用的旋转位置编码RoPE详解:为什么它比绝对或相对位置编码更好? 大语言模型中常用的旋转位置编码RoPE详解:为什么它比绝对或相对位置编码更好? Apr 01, 2024 pm 08:19 PM

自2017年发表的“AttentionIsAllYouNeed”论文以来,Transformer架构一直是自然语言处理(NLP)领域的基石。它的设计多年来基本没有变化,随着旋转位置编码(RoPE)的引入,2022年标志着该领域的重大发展。旋转位置嵌入是最先进的NLP位置嵌入技术。大多数流行的大型语言模型(如Llama、Llama2、PaLM和CodeGen)已经在使用它。在本文中,我们将深入探讨什么是旋转位置编码,以及它们如何巧妙地融合绝对位置嵌入和相对位置嵌入的优点。位置编码的需求为了理解Ro

html5怎么让盒子居中 html5怎么让盒子居中 Apr 05, 2024 pm 12:27 PM

在 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%);

什么是layout布局? 什么是layout布局? Feb 24, 2024 pm 03:03 PM

layout布局是指在网页设计中,为了使网页元素按照一定的规则和结构进行排列和展示而采取的一种排版方式。通过合理的布局,可以使网页更加美观、整齐,并且达到良好的用户体验。在前端开发中,有许多种布局方式可以选择,比如传统的table布局、浮动布局、定位布局等。但是,随着HTML5和CSS3的推广,现代的响应式布局技术,如Flexbox布局和Grid布局,成为了

See all articles