$(".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---------////////////////

监控窗口变化,获取对应位置变化及区间。

//监控窗口变化,探测页面更改

 $(window).resize(function () {          //当浏览器大小变化时

    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 元素 绝对位置坐标的更多相关文章

  1. JS获得元素相对位置坐标getBoundingClientRect()

    getBoundingClientRect用于获取某个元素相对于视窗的位置集合.集合中有top, right, bottom, left等属性. 1.语法:这个方法没有参数. rectObject = ...

  2. jquery获取html元素的绝对位置和相对位置

    jquery获取html元素的绝对位置坐标和相对父元素的位置坐标方法:绝对位置坐标:$("#elem").offset().top$("#elem").offs ...

  3. 通过jquery获得某个元素的位置, 透明div, 弹出框, 然后在旁边显示toggle子级联菜单-hover的bug解决

    jquery的"筛选选择器", 都是用冒号开头的, 即, 冒号选择器就是 筛选选择器.如: :first, :last, :eq(index), :first-child,...等 ...

  4. jquery获取html元素的绝对位置和相对位置的方法

    绝对位置坐标: 代码如下: $("#elem").offset().top$("#elem").offset().left 相对父元素的位置坐标: 代码如下: ...

  5. 获取元素位置信息和所占空间大小(via:js&jquery)

    工作中有一个很常见的需求,hover或者click某元素后,在该元素旁边出现弹框,主要就是获取该元素的位置坐标以及元素所占区块的大小.最近工作中就遇到了,发现js和jquery的实现方法有很大的区别, ...

  6. html中如何获取元素在文档中的位置

    html中如何获取元素在文档中的位置 一.总结 一句话总结: $("#elem").offset().top $("#elem").offset().left ...

  7. CSS学习笔记——CSS选择器样式总结

    <style type="text/css"> * { padding:0; margin:0; } .box h2 { //内边距左边的距离 padding-left ...

  8. IE6、7下获得offset值跟其他浏览器不一样问题

    大家都知道,offset是元素的位置坐标,那位置坐标又和文档流有关系.如果position默认不设置的话,其值是static.static是个什么东东呢?下面我详细介绍一下: 语法: position ...

  9. cocos2d-x多分辨率和随后的自适应CCListView的bug修复

    cocos2d-x多分辨率自适配及因此导致的CCListView的bug修复 cocos2d-x是一款众所周知的跨平台的游戏开发引擎.因为其跨平台的特性.多分辨率支持也自然就有其需求. 因此.在某一次 ...

随机推荐

  1. iOS-代理反向传值<转>

    在上篇博客 iOS代理协议 中,侧重解析了委托代理协议的概念等,本文将侧重于它们在开发中的应用. 假如我们有一个需求如下:界面A上面有一个button.一个label.从界面A跳转到界面B,在界面B的 ...

  2. IOS应用沙盒文件操作

    iOS沙盒机制 iOS应用程序只能在为该改程序创建的文件系统中读取文件,不可以去其它地方访问,此区域被成为沙盒,所以所有的非代码文件都要保存在此,例如图像,图标,声音,映像,属性列表,文本文件等. 1 ...

  3. C++ STL 迭代器失效问题

    之前看<C++ Primier>的时候,也解到在顺序型窗口里insert/erase会涉及到迭代器失效的问题,并没有深究.今天写程序的时候遇到了这个问题. 1 莫名其妙的Erase 最初我 ...

  4. log4net资料收集

    Log4net 日志使用介绍 http://www.cnblogs.com/jys509/p/4699813.html log4net Tutorial http://www.codeproject. ...

  5. SAM4E单片机之旅——14、LCD之SMC的配置

    在上个例子中,已经在ASF添加了ILI93xx模块,并做好了相关的声明.这次就做好SMC的配置,然后使用ASF提供的API在屏幕上打印出”Hello World!”字样. 一. 电路图 开发板的LCD ...

  6. Oracle查看所有用户

    1.查看所有用户:select * from dba_users;   select * from all_users;   select * from user_users; 2.查看用户或角色系统 ...

  7. jQuery Validate 表单验证插件----在class属性中添加校验规则进行简单的校验

    一.下载插件包. 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.jQuery表单验证插件----添加class属性形式的校验 <!DOCTY ...

  8. linux内核宏container_of前期准备之gcc扩展关键字typeof

    typeof基本介绍 typeof(x) 这是它的使用方法,x可以是数据类型或者表达式.它的作用时期和sizeof类似,就是它是在编译器从高级语言(如C语言)翻译成汇编语言时起作用,这个很重要,稍后会 ...

  9. nopcommerce之权限模块

    这篇文章简单介绍一下nopcommerce的权限模块,nopcommerce里面的权限设计相对比较简单,主要针对后台的action和前台的是否显示(比如产品.品牌等),虽然简单但是应付一般的项目应该没 ...

  10. 怎样用ZBrush快速雕刻皮肤纹理

    今天的ZBrush教程我们将对利用基础笔刷制作出的“亡灵僵尸”头部模型进行皮肤纹理的处理,主要用到了Layers 3D图层和Alpha笔触类型添加皮肤纹理. 详细的视频教程地址可前往:http://w ...