Javascript 使用jQuery实现圆形导航效果

我对jQuery非常陌生，希望在我的网页上设置一个圆形按钮的动画

从找到一个新的脚本开始，我用有限的Javascript知识尽可能地修改了它。这是我当前的

我的演示：

我想知道我是否可以用它做以下事情：

1。将圆元素固定到一个位置。现在它朝着相同的方向向外扩展，我想扩展，但仍然保持在相同的位置，所以它可能向右边扩展

2.是否可以将“placehold”图形粘贴到圆圈外，使其稍微突出一点

我的HTML：

<div id="seven" class="circle">
    <div><img src="http://placehold.it/100x100" style="position:relative;margin-top:-20px" /></div>
    <div style="float:left;margin-left:100px">click me. texty text, some long text wrapping</div>
</div>

CSS

.circle {
    background-color: black;
    overflow: hidden;
    position: absolute;
}

#seven
{
    background-color: transparent;
    border: 1px solid black;
    width: 80px;
    height: 80px;
    border-radius: 90px;
    top: 40px;
    left: 40px;
}

#seven div
{
    /* h=radius, a=h/sqrt(2), height=width=2a, left=top=h-a */
    height: 128px;
    left: 26px; 
    position: absolute;
    top: 26px;
    width: 128px;

}

---

非常感谢您的指点。

要将circle元素固定在左上角，使其扩展到右下角，请注释掉以下两行：

"left": circle.left - ( expand / 2 ) + "px",
"top": circle.top - ( expand / 2 ) + "px",

---

要使圆圈的内容粘在圆圈外，请删除

overflow:hidden.circle

元素添加code>。

尝试删除CSS中的这一行

overflow: hidden;

---

非常感谢你的回复，西蒙。我现在就尝试一下，然后再给你回复。我也提出了同样的简单解决方案，也修复了z-index：你能告诉我我要对哪行代码进行第一次更新吗？我添加了

overflow:hidden

，但它似乎引起了一个问题>@michaelmcgurk我想你的小提琴中的问题是Javascript第六行有几个垃圾字符…@michaelmcgurk好吧，这可能要难多了，我的笔记本电脑电池显示“剩余两分钟”。。。对不起:(

overflow: hidden;