当前位置:首页 > 日记 > 正文

浅谈jQuery的偏移()方法和实例共享

浅谈jQuery的偏移()方法和实例共享
偏移()法的定义和用法:

此方法返回或设置与文档对象相对应的匹配元素的偏移量。

语法结构1:

$(选择器)。

获取当前文档中匹配元素的相对偏移量。

返回的对象包含两个整数属:顶和左。

此方法只对可见元素有效。

实例代码:
* {
保证金:0px;
填料:0px;
}
父亲{。
border: 1px solid黑;
宽度:400px;
身高:300px;
填料:10px;
保证金:50px;
}
孩子{。
身高:150px;
宽度:200px;
左:50px保证金;
背景颜色:绿色;
}
$(文档)Ready(函数(){)
$(按钮)。Click(函数(){)
a = $();
警报(元素的偏移坐标是:+ a.top +|不再+ + );
})
})

获取元素的坐标

上面的代码可以弹出子div相对于文档的偏移量。

语法结构二:

$(选择器)。偏移量(值)
设置匹配元素相对于文档对象的坐标。

偏移()方法允许我们重置元素的位置,这个元素的位置相对于文档对象。

如果对象的原始位置样式属性是静态的,它将被更改为相对位置以便重新定位。

参数列表:

参数描述

值指定像素的顶部和左侧坐标。
可能的值:
1。值对,如{顶部:200,左:10 }。

2。具有左上和右属性的。
实例代码:
父亲{。
border: 1px solid黑;
宽度:400px;
身高:300px;
}
孩子{。
身高:150px;
宽度:200px;
背景颜色:绿色;
}
$(文档)Ready(函数(){)
$(按钮)。Click(函数(){)
$(.)。偏移量({顶部:100,左:100 })
})
})

单击设置偏移

上面的代码可以设置div相对于文档的偏移量。

语法结构三:

使用函数的返回值设置偏移坐标:

$(选择器)。偏移(函数(指数,oldoffset))

参数列表:

参数描述

(指数函数、属性的旧值)指定函数返回新的偏移选中元素的坐标:

索引-可选的。元素的索引。

Oldvalue - optional.The current coordinates.
实例代码:

父亲{。
border: 1px solid黑;
宽度:400px;
身高:300px;
}
孩子{。
身高:150px;
宽度:200px;
背景颜色:绿色;
}
$(文档)Ready(函数(){)
$(按钮)。Click(函数(){)
$(。)偏移量(函数(a,b){)
VaR新=新对象();
新b.top = + 50;
新b.left +左= 50;
返回新;
})
})
})

单击设置偏移

上面的代码也可以设置元素的偏移量,但是这个值是由函数返回的。

以上是本文的全部内容,希望大家能喜欢。

相关文章

一种用纯js实现局部图像预览的方法

一种用纯js实现局部图像预览的方法

方法,图像,局部,电脑软件,js,本文介绍了一种用js实现本地图片预览的方法,供大家参考: 突然间,互联网上出现了很多类似的代码,但是没有找到合适的代码。我以前写的方法可以单独去掉,兼容性不太好。原生浏览器基本上是支持的(也就是FF、Chrome)。 …

教你用焰火制作蛋壳美人

教你用焰火制作蛋壳美人

蛋壳,焰火,教你用,美人,电脑软件,本教程介绍你创建蛋壳美人烟花。效果非常漂亮,而且方法非常简单。再次,感觉非常好,并转发它,希望能帮助你。 本教程介绍你用烟火制作蛋壳美人。效果非常漂亮,而且方法非常简单。再一次,我感觉很好。我希望它会对…

ps制作了逼真的海市蜃楼效果

ps制作了逼真的海市蜃楼效果

海市蜃楼,逼真,效果,电脑软件,ps,本教程介绍了一个朋友,以PS创造一个现实的海市蜃楼效果的方法。教程制作的幻影非常逼真,方法非常简单。非常适合初学者学习。建议像你这样的朋友一起学习这个教程。 用PS做海市蜃楼效果,觉得不是不可能吗事实…

Word2007表格表Word2007教程灵活调

Word2007表格表Word2007教程灵活调

调整,教程,宽度,表格,灵活,我们常常遇到在手术台上编辑Word2007文档的过程中,本文介绍了如何使用Ctrl和Shift键在Word2007文档灵活调整列宽度表,这种技术将使我们的工作一半的时间,大大提高工作效率。 我们都知道,你可以用鼠标拖动右边的单元格…

提高用户购买欲望的设计探索

提高用户购买欲望的设计探索

购买,用户,欲望,电脑软件,本教程是向朋友介绍提高用户购买设计的探索性的,教程很不错,值得学习,让我们来看看吧。 本设计是很好的商务服务,今天腾讯真的演示了设计师为提高QQ音乐专辑销售过程的设计,涉及大量干货,强烈推荐阅读。 在互联网+时代…

有趣的幽默,滑稽的笑,个性签名和个性

有趣的幽默,滑稽的笑,个性签名和个性

个性签名,滑稽,有趣,幽默,电脑软件,青春是一罐啤酒的小变化。 我听说我们学校遭到恐怖分子的袭击,一个接一个地被杀了。Rdquo:它太好了,我可以活很长时间。。 不要再谈你的个性了。你说晚安,睡给你爱的人已经太晚了。 老师说:世上没有后悔药,只有…

如何设置动画播放方式ppt2003Power

如何设置动画播放方式ppt2003Power

教程,动画,如何设置,方式,电脑软件,PowerPoint2003是微软公司提供的幻灯片制作软件,它通常是一起使用的投影机,无论在语音、类、会议、培训等,这是必不可少的工具和设备。如果幻灯片中多个对象的动画,有必要确定的生活方式(自动播放,或玩,手动)。让…

PHP实现的数字验证码和数字操作验

PHP实现的数字验证码和数字操作验

数字,验证码,操作,电脑软件,PHP,本文介绍了PHP实现的数字验证码和数字操作验证代码,供大家参考: 1。数字验证码: 第一个例子是最常见的数字验证码,验证码。多少个数字可以由他们自己决定。 是一个包含几个数字的生成验证代码。 getvalidate(4,…

PS图象处理软件增加了一个金黄色的

PS图象处理软件增加了一个金黄色的

金黄色,图象,处理软件,增加了,海边,本教程主要使用PS图象处理软件的照片,海边的船只的色彩增添活力。色彩鲜艳的夏天是摄影的最佳季节,但要重现绚丽的色彩并不容易。如果你想让你的夏日照片看起来更美,不妨试试下面的技巧,并使用一个自定义渐变…

excel如何结合多个Excel工作文档来

excel如何结合多个Excel工作文档来

计算,工作文档,多个,电脑软件,excel,当我们在多个excel工作表中计算数据时,我们经常需要在开始计算之前合并数据。这可以更快地提高计算效率,下面的小编辑器列出了一些技巧,希望对你有所帮助。 1。基于位置或分类的合并计算 当您还没有在合并…

合并Discuz用户PHP实现

合并Discuz用户PHP实现

用户,合并,电脑软件,Discuz,PHP,本文阐述了PHP与Discuz用户脚本相结合的方法,分享给你参考。以下是如下: 前几天,我遇到了一个项目,需要合并两Discuz。一个用户级别是12万左右,一个是1万8,毫无疑问,它抛出1万8,离开12万。数据表都是相关联的。新用…

PowerPoint基本教程:带一个内嵌字库

PowerPoint基本教程:带一个内嵌字库

教程,字库,内嵌,电脑软件,PowerPoint,我们经常遇到这样的情况:由于每个计算机上安装的字体文件不同,一台计算机上打开的字体会在另一台计算机上打开,字体会发生变化,影响PowerPoint课件的回放效果。 事实上,只要选择当你保存PowerPoint文件;将Tru…