zoukankan      html  css  js  c++  java
  • 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---------////////////////

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

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

     $(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定位在浏览器文档的左上,右上等方位

  • 相关阅读:
    Redis list数据结构
    Redis hash结构
    大公司都有哪些开源项目~~~阿里,百度,腾讯,360,新浪,网易,小米等
    使用Nexus搭建Maven私服
    Maven nexus 安装nexus私服出现的两个问题
    SONATYPE NEXUS 搭建MAVEN 私服
    http://www.cnblogs.com/jqyp/archive/2010/08/20/1805041.html
    将 Smart 构件发布到 Maven 中央仓库
    http://www.ruanyifeng.com/blog/2013/07/gpg.html
    http://www.jianshu.com/p/1e402922ee32/
  • 原文地址:https://www.cnblogs.com/developer-ios/p/5949634.html
Copyright © 2011-2022 走看看