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
        })
    })
  • 相关阅读:
    CSS3 Transitions 你可能不知道的知识点
    css规范
    移动应用表单设计秘籍
    SVN和Git的一些用法总结
    让Terminal显示git分支
    JavaScript正则表达式下——相关方法
    requests模块
    flask模块
    os模块
    简单的socket编程
  • 原文地址:https://www.cnblogs.com/caicaihong/p/9379154.html
Copyright © 2011-2022 走看看