html 元素 绝对位置坐标
$(".seriesListings-itemContainer").click(function(){$(this).css("border","1px #000 solid");console.log("X:"+$(this).offset().left+"Y:"+$(this).offset().top);});
$(".seriesListings-itemContainer").click(function(){$(this).css("border","1px #000 solid");console.log("X:"+$(this).offset().left+"Y:"+$(this).offset().top);});
////////////---------app----start---------////////////////
$(window).resize(function () {
var min=-1000;
var max=-1000;
var hangshu=0;
var one=0;
var one_h=0;
var once=true;
var size_e=0;
$(".seriesListings-itemContainer").click(function(){$(this).css("border","1px #000 solid");console.log("X:"+$(this).offset().left+"Y:"+$(this).offset().top);});
$('.seriesListings-itemContainer').each(function (index,domEle){
size_e++;
var x=$(domEle).offset().left;
var y=$(domEle).offset().top;
if(once){
one=$(domEle).width();
one_h=$(domEle).height();
min=x;
once=false;
}
if(max<x){
hangshu++;
max=x;
}
}
);
var cw=$(window);
var cw_w=cw.width();
var cw_h=cw.height();
var row=parseInt(size_e/hangshu)+(size_e%hangshu>0?1:0);
console.log("窗口宽:"+cw_w+"窗口高:"+cw_h+"最大列:"+hangshu+"左间距:"+min+"右间距:"+(cw_w-max-one)+"行数:"+row+"总数:"+size_e);
min=-1;
max=-1;
hangshu=0;
//console.log("X:"+$(domEle).offset().left+"Y:"+$(domEle).offset().top);});
});
////////////---------app----end---------////////////////
监控窗口变化,获取对应位置变化及区间。
//监控窗口变化,探测页面更改
alert($(window).height()); //浏览器时下窗口可视区域高度
alert($(document).height()); //浏览器时下窗口文档的高度
alert($(document.body).height()); //浏览器时下窗口文档body的高度
alert($(document.body).outerHeight(true)); //浏览器时下窗口文档body的总高度 包括border padding margin
});
绝对位置坐标:
$("#elem").offset().top
$("#elem").offset().left
相对父元素的位置坐标:
$("#elem").position().top
$("#elem").position().left
另:
static(默认):默认定位方式。
relative(相对定位):在static的基础上,相对元素本来的位置变化,通过设定top,bottom,left,right实现。
absolute(绝对定位):是相对父元素来说的,如果父元素中有relative,那么该元素的位置是经过计算后的结果。即absolute定位的参照物是“上一个定位过的父元素(static不算)”。绝对定位会使元素从文档流中被删除。
fixed(固定定位):fixed定位的参照物总是当前的文档。利用fixed定位,很容易让一个div定位在浏览器文档的左上,右上等方位
html 元素 绝对位置坐标的更多相关文章
- JS获得元素相对位置坐标getBoundingClientRect()
getBoundingClientRect用于获取某个元素相对于视窗的位置集合.集合中有top, right, bottom, left等属性. 1.语法:这个方法没有参数. rectObject = ...
- jquery获取html元素的绝对位置和相对位置
jquery获取html元素的绝对位置坐标和相对父元素的位置坐标方法:绝对位置坐标:$("#elem").offset().top$("#elem").offs ...
- 通过jquery获得某个元素的位置, 透明div, 弹出框, 然后在旁边显示toggle子级联菜单-hover的bug解决
jquery的"筛选选择器", 都是用冒号开头的, 即, 冒号选择器就是 筛选选择器.如: :first, :last, :eq(index), :first-child,...等 ...
- jquery获取html元素的绝对位置和相对位置的方法
绝对位置坐标: 代码如下: $("#elem").offset().top$("#elem").offset().left 相对父元素的位置坐标: 代码如下: ...
- 获取元素位置信息和所占空间大小(via:js&jquery)
工作中有一个很常见的需求,hover或者click某元素后,在该元素旁边出现弹框,主要就是获取该元素的位置坐标以及元素所占区块的大小.最近工作中就遇到了,发现js和jquery的实现方法有很大的区别, ...
- html中如何获取元素在文档中的位置
html中如何获取元素在文档中的位置 一.总结 一句话总结: $("#elem").offset().top $("#elem").offset().left ...
- CSS学习笔记——CSS选择器样式总结
<style type="text/css"> * { padding:0; margin:0; } .box h2 { //内边距左边的距离 padding-left ...
- IE6、7下获得offset值跟其他浏览器不一样问题
大家都知道,offset是元素的位置坐标,那位置坐标又和文档流有关系.如果position默认不设置的话,其值是static.static是个什么东东呢?下面我详细介绍一下: 语法: position ...
- cocos2d-x多分辨率和随后的自适应CCListView的bug修复
cocos2d-x多分辨率自适配及因此导致的CCListView的bug修复 cocos2d-x是一款众所周知的跨平台的游戏开发引擎.因为其跨平台的特性.多分辨率支持也自然就有其需求. 因此.在某一次 ...
随机推荐
- iOS网络-04-大文件下载
大文件下载注意事项 若不对下载的文件进行转存,会造成内存消耗急剧升高,甚至耗尽内存资源,造成程序终止. 在文件下载过程中通常会出现中途停止的状况,若不做处理,就要重新开始下载,浪费流量. 大文件下载的 ...
- RunTime(运行时机制)
1>runtime实现的机制是什么,怎么用,一般用于干嘛? 这个问题我就不跟大家绕弯子了,直接告诉大家, runtime是一套比较底层的纯C语言API, 属于1个C语言库, 包含了很多底层的C语 ...
- Monyer's Game 11~15关过关方法
到目前为止,玩这个小游戏并过关的人数已经达到了81人,首先Monyer要感谢各位的捧场与支持.继续上次的<Monyer's Game 6~10关过关方法>,我们来看剩下几关的过关方法. 但 ...
- linux修改open files数
概要 linux系统默认open files数目为1024, 有时应用程序会报Too many open files的错误,是因为open files 数目不够.这就需要修改ulimit和file-m ...
- CentOS6.5(Python-2.7.12)安装Pip
1.安装setuptools(下载链接可从https://pypi.python.org/pypi/setuptools#code-of-conduct寻找) #Download setuptools ...
- jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面 ...
- 设计模式C#实现(四)——迭代器模式
迭代器模式:提供一种方法顺序访问一个聚合对象中的各个元素,而又不暴露其内部的表示. UML类图: 煎饼屋和餐厅合并了!但是有个小问题,虽然两家都同意实现相同的菜单项MenuItem,但是煎饼屋想使用A ...
- Lighttpd
一.简介 Lighttpd 是一个德国人领导的开源Web服务器软件,其根本的目的是提供一个专门针对高性能网站,安全.快速.兼容性好并且灵活的web server环境.具有非常低的内存开销,cpu占用率 ...
- Start cluster zookeeper in shell script
cat start-zookeeper.sh #!bin/sh for node in namenode01 datanode01 datanode02 do echo "s ...
- UI设计实战篇——利用Bootstrap框架制作查询页面的界面
Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太大).尤其是现在的响应时布局(我的理解是页面根据不同的分辨率,采用不 ...