$(".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网络编程入门级别的要点:       1.客户端如何找到连接的服务器    客户端通过URL找到想要连接的服务器   2.什么是URL     URL的全称是Un ...

  2. (传输层)TCP协议

    目录 首部格式数据单位特定注意自动重传请求ARQ具体实现发送缓存接收缓存滑动窗口确认丢失和确认迟到超时重传时间选择报文段的发送时机运输连接发送TCP请求客户端拥塞处理相关概念避免拥塞具体实现TCP 的 ...

  3. SAM4E单片机之旅——21、DMAC之USART回显

    DMAC也可以和外设进行数据交互.之前我们曾使用PDC进行USART的数据回显,这次就使用DMAC完成相同的工作.而且由于DMAC有内部的缓冲区,实现起来更为简单. 一. USART设置 因为之前已经 ...

  4. Effective Java 13 Minimize the accessibility of classes and members

    Information hiding is important for many reasons, most of which stem from the fact that it decouples ...

  5. Effective Java 32 Use EnumSet instead of bit fields

    Bit fields is used for passing around sets of constants. Such as // Bit field enumeration constants ...

  6. 基于Cookie的SSO登录分析和实现

    什么是SSO? 现在很多大的互联网公司都会有很多的应用,比如以下是淘宝网的截图: 天猫 聚划算 头条等都是不同的应用,有的甚至采用完全不同的域名,但是所有在淘宝注册的用户都是使用的一套用户名和口令,如 ...

  7. MFC 网络编程 -- 总结

    原文链接:http://www.cnblogs.com/lidabo/archive/2012/07/19/2598734.html 1.基于 TCP 的 socket 编程 /* 服务器端程序流程: ...

  8. ajax跨域 自定义header问题总结

    遇到的问题:已经在ajax里面添加自定义参数,但是没有生效 beforeSend : function(request) { request.setRequestHeader("region ...

  9. C标准头文件概述

    C的C89标准一共定义了15个头文件,这些头文件具有幂等性(多次包含同一个头文件的效果等同于只包含了一个头文件,例外),独立性(每个标准头文件的正常工作都不需要以包含其他标准头文件为前提,也没有任何标 ...

  10. pageX和pageY

    pageX() 属性是鼠标指针的位置,相对于文档的左边缘. pageY() 属性是鼠标指针的位置,相对于文档的上边缘. 例1 $(document).mousemove(function(e){ $( ...