zoukankan      html  css  js  c++  java
  • jQuery之offset,position

    获取/设置标签的位置数据
    * offset(): 相对页面左上角的坐标
    * position(): 相对于父元素左上角的坐标.

    需求:
    1. 点击 btn1
    打印 div1 相对于页面左上角的位置
    打印 div2 相对于页面左上角的位置
    打印 div1 相对于父元素左上角的位置
    打印 div2 相对于父元素左上角的位置
    2. 点击 btn2
    设置 div2 相对于页面的左上角的位置

    代码实现:

    //1. 点击 btn1
    $("#btn1").click(function(){
        //  打印 div1 相对于页面左上角的位置 10 20
        var offet = $(".div1").offset();
        console.log("left:"+offet.left+",top:"+offet.top);
        //  打印 div2 相对于页面左上角的位置 10 70
        var offet2 = $(".div2").offset();
        console.log("left:"+offet2.left+",top:"+offet2.top);
        
        //  打印 div1 相对于父元素左上角的位置 10 20
        var position = $(".div1").position();
        console.log("left:"+position.left+",top:"+position.top);
        //  打印 div2 相对于父元素左上角的位置 0 50
        var position = $(".div2").position();
        console.log("left:"+position.left+",top:"+position.top);
        
    });
    ///2. 点击 btn2
    $("#btn2").click(function(){
        //设置 div2 相对于页面的左上角的位置
        $(".div2").offset({
            left:50,
            top:70
        })
    })
  • 相关阅读:
    linux初始化宏__init, __exit
    linux内核initcall
    常用命令合集
    df
    ln
    cat
    grep
    find
    IE11浏览器传时间格式不兼容,c.a.d.c.advice.AdcDaBaseExceptionAdvice : JSON parse error
    js 图片不保存的回显功能/图片尺寸验证/图片大小验证 /图片类型验证
  • 原文地址:https://www.cnblogs.com/caicaihong/p/9379154.html
Copyright © 2011-2022 走看看