SDM Different Menu 6

by pin hwu

HTML

<div class="con">
    
    <div id="box" class="a"></div>
    
</div>

<div id="car" class="car"></div>

CSS

* {margin:0px;padding:0px;}
.con{
    width:300px;
    height:200px;
    border:1px solid #000;
       margin-top:20px;
    margin-left:20px;
}

.a{
    width:20px;
    height:20px;
    margin-top:10px;
    margin-left:200px;
    background-color:red;
}

.car{
    width:50px;
    height:50px;
    background-color:blue;
    position:fixed;
    bottom:10px;
    left:10px;
    
}

JavaScript

$(".a").click(function(){
    //获取到该元素的所有信息	
	var local = this.getBoundingClientRect();
    local.top;
    local.left;
    local.right;
    local.bottom;
    local.width;
    local.height;
    
    //动态创建一个div，该div的位置就位于local元素的位置
    var div="<div style='width:20px;height:20px;position:fixed;left:"+local.left+";top:"+local.top+";background-color:red;color:#fff;'>+</div>";
    
    //将该动态创建的div添加到body中
    $(body).append(div);
    
    //获取到car的坐标
    var car = document.getElementById("car").getBoundingClientRect();
    
});