FloatBox

by darkk6

HTML

<div class="normal" style="position:fixed; width:200px; height:100px"><div>

<div class="floatBox">
</div>

CSS

div.normal{
    background-color: #00FF00;
}

div.floatBox{
    color:white;
    display:none;
    position:fixed;
    overflow:auto;
    width:100px;
    height:100px;
    background-color: blue;
    padding-left:5px;
    padding-top:5px;
    /*
        -moz-      為 Firefox 使用
        -webkit- 為 Chrome,Safari 使用
    */
    -moz-border-radius: 3px;
    -moz-box-shadow: 3px 3px 4px #999;
    -webkit-border-radius: 3px;
    -webkit-box-shadow: 3px 3px 4px #999;
    border-radius: 3px;
    box-shadow: 3px 3px 4px #999; // for Opera
    filter:shadow(color='#999', Direction=135, Strength=6); //for IE
}

JavaScript

$(document).ready(function(){
    $('div.normal').mouseout(hide);
    $('div.normal').mousemove(move);
});

function hide(){
    $("div.floatBox").hide();
}

function move(obj){
    var point=new Object;
    point.x=obj.clientX;
    point.y=obj.clientY;
    $("div.floatBox").text("( "+point.x+" , "+point.y+" )");
    $("div.floatBox").show();
    $("div.floatBox").css("left",point.x+36);
    $("div.floatBox").css("top",point.y+36);
}