自定义jQuery“粘液”菜单，功能奇特

Question

我想创建一个jQuery粘液菜单。基本概念很简单。我在屏幕上有一些固定位置的图标。其中一些是＆＃34;开关＆＃34;，如果你点击它们，你需要点击另一个元素才能产生一些效果（想象一下你在RTS中有一个建筑时的形象。它还不够只需单击建筑物的图标，但您需要在该操作后将其放置在地图上。）

我想在点击图标后显示一个CSS三角形元素，然后点击另一个＆＃34;兼容＆＃34; DIV。问题不在这里，但我对CSS转换并不熟悉。

这是我到目前为止的一个小提琴。我的问题是箭头元素没有旋转到光标。我还需要更改它的大小，因此三角形的底部中心必须位于指针处。

http://jsfiddle.net/PSYKLON/41Lcj653/

HTML部分很简单（span元素用于调试）：

<div class="fixicon"></div>
<div class="arrow"></div>
<span></span>

CSS：

span {
    float: right;
}
.fixicon {
    width: 30px;
    height: 30px;
    background: #111;
    border-radius: 15px;
    position: fixed;
    left: 10px;
    top: 10px;
}
.arrow {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 25px 200px 25px;
    border-color: transparent transparent #111 transparent;
    opacity: 0;
    position: fixed;
    left: 0;
    top: 25px;
    transform-origin: 25px 0px;
    transform: rotate(0deg);
}
.arrow.show {
    opacity: 1;
}

和JS：

$(function(){
    $('.fixicon').click(function(){
        $('.arrow').toggleClass('show');
    });
    $(window).mousemove(function(e){
        if(!$('.arrow').hasClass('show')) {
            return;
        }
        var dir = point_direction(25,25,e.pageX,e.pageY);
        $('.arrow').css('transform','rotate('+dir+'deg)');
        $('span').text(dir);
    });
});

function point_direction(x1,y1,x2,y2) {
    var dx,dy;
    dy = y2 - y1;
    dx = x2 - x1;
    return (Math.atan(dy/dx) * 360) % 360;
}

所以基本上，我需要实现这样的事情，屏幕上的光标在哪里并不重要：

感谢能够提供帮助的任何人。 ：）