0
我对jQuery非常陌生，并且想要在我的网页上设置一个圆形按钮的动画效果。使用jQuery实现圆形导航效果
从找到一个fiddle我尽我所能用我有限的Javascript知识对其进行了调整。这是我目前的Demo。
我在想，如果我可以用它做如下：
修复圆元素之一的地位。目前它向外扩展的方向是同样的，我想扩大但仍然保持在同一个位置 - 也许它向右开放？
2.是否可以将“位置”图形粘贴在圆圈外面，这样可以找出一点点？
我的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>
的Javascript
//setup
$(".circle").each(function() {
var radius = $(this).outerWidth()/2,
left = $(this).offset().left,
top = $(this).offset().top;
$(this).data({
"radius": radius,
"left": left,
"top": top,
"clicked": false
});
$("body").data ({ "hovering":false });
});
//move and expand
function setLocations(circle, expand, event) {
var $this = $(circle),
circle = $this.data(),
hoveredX = circle.left + circle.radius,
hoveredY = circle.top + circle.radius;
$("body").data("hovering", true);
//expand circle you're over
$this.animate({
"width": (2 * circle.radius) + expand + "px",
"height": (2 * circle.radius) + expand + "px",
"left": circle.left - (expand/2) + "px",
"top": circle.top - (expand/2) + "px",
"border-top-left-radius": circle.radius + (expand/2) + "px",
"border-top-right-radius": circle.radius + (expand/2) + "px",
"border-bottom-left-radius": circle.radius + (expand/2) + "px",
"border-bottom-right-radius": circle.radius + (expand/2) + "px"
}, 75);
//images have to be done separately
$this.children("img").animate({
"border-top-left-radius": circle.radius + (expand/2) + "px",
"border-top-right-radius": circle.radius + (expand/2) + "px",
"border-bottom-left-radius": circle.radius + (expand/2) + "px",
"border-bottom-right-radius": circle.radius + (expand/2) + "px"
}, 75);
//text in circle
if($this.children("div").length) {
var h = circle.radius + (expand/2),
a = h/Math.sqrt(2),
size = 2 * a,
padding = h - a;
$this.children("div").animate({
"left": padding,
"top": padding,
"width": size,
"height": size
}, 75);
};
//move other cicles out of the way
$this.siblings(".circle").each(function() {
debugger;
var $this = $(this);
var circle = $this.data();
var circleX = circle.left + circle.radius;
var circleY = circle.top + circle.radius;
var angle = Math.atan2(hoveredY - circleY, hoveredX - circleX);
var topMove = ((expand /2) * Math.sin(angle));
var leftMove = ((expand /2) * Math.cos(angle));
$this.animate({
"left": "-=" + leftMove + "px",
"top": "-=" + topMove + "px"
}, 75);
});
};
//put everything back the way it was
function resetLocations() {
$(".circle").each(function() {
var $this = $(this),
circle = $this.data();
$this.stop().animate({
"width": (2 * circle.radius) + "px",
"height": (2 * circle.radius) + "px",
"left": circle.left + "px",
"top": circle.top + "px",
"border-top-left-radius": circle.radius + "px",
"border-top-right-radius": circle.radius + "px",
"border-bottom-left-radius": circle.radius + "px",
"border-bottom-right-radius": circle.radius + "px"
}, 75);
$this.children("img").stop().animate({
"border-top-left-radius": circle.radius + "px",
"border-top-right-radius": circle.radius + "px",
"border-bottom-left-radius": circle.radius + "px",
"border-bottom-right-radius": circle.radius + "px"
}, 75);
if($this.children("div").length) {
var h = circle.radius,
a = h/Math.sqrt(2),
size = 2 * a,
padding = h - a;
$this.children("div").animate({
"left": padding,
"top": padding,
"width": size,
"height": size
}, 75);
};
});
$("body").data("hovering", false);
};
//is mouse inside circle or in "corner" of div
function inCircle(circle, x, y) {
var radius = circle.outerWidth()/2,
circleX = circle.offset().left + radius,
circleY = circle.offset().top + radius,
xDiff = (circleX - x),
yDiff = (circleY - y),
mouseDistance = Math.sqrt((xDiff * xDiff) + (yDiff * yDiff));
return (mouseDistance > radius ? false : true);
};
$(".circle").mouseleave(function(event) {
resetLocations();
$(this).data("clicked", false);
});
$(".circle").mousemove(function(event) {
if(inCircle($(this), event.pageX, event.pageY)) {
if (!$("body").data("hovering")) {
setLocations(this, 40, event);
};
} else {
if ($("body").data("hovering")) {
resetLocations();
$(this).data("clicked", false);
};
};
});
$(".circle").click(function(event) {
if($(this).data("clicked")) {
resetLocations();
$(this).data("clicked", false);
} else {
if(inCircle($(this), event.pageX, event.pageY)) {
$(this).data("clicked", true);
setLocations(this, 200, event);
} else {
resetLocations();
$(this).data("clicked", false);
};
};
});
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;
}
非常感谢任何与此指针。
非常感谢您的回复，西蒙。我现在就试试看，并回复你。 – michaelmcgurk 2013-04-28 10:46:34
我使用了相同的简单解决方案，修复了z-index：http://jsfiddle.net/uLu7v/62/ – 2013-04-28 10:49:20
你可以告诉我我要做什么第一组更新的代码行吗？我加了'overflow：hidden'，但是它似乎导致了一个问题> http://jsfiddle.net/FcBPh/1/ – michaelmcgurk 2013-04-28 10:49:43