这个问题继承了上一个问题,可以在这里找到:需要用jQuery 在每个圆圈中一个接一个地渐变
基本上,现在当点击"气候变化和能源"圆圈时,我需要隐藏除了点击的圆圈之外的所有其他圆圈,并显示一个子集或其他与原始圆圈相同路径的圆圈。但是新的圆圈从单击的圆圈的下一个点开始。
我附上了一张当你点击圆圈时需要显示的图片,可以在这里看到:http://cl.ly/EO95
这是我尝试使用的代码:
HTML:
<div class="circle_holder seventh">
<div class="circle pie">
<a href="#"><span>climate change and energy</span></a>
</div>
<div class="inner_circles hidden">
<div class="circle_holder eighth">
<div class="circle pie">
<a href="#"><span>energy efficiency</span></a>
</div>
</div>
<div class="circle_holder first">
<div class="circle pie">
<a href="#"><span>renewable energy</span></a>
</div>
</div>
<div class="circle_holder second">
<div class="circle pie">
<a href="#"><span>carbon finance</span></a>
</div>
</div>
<div class="circle_holder third">
<div class="circle pie">
<a href="#"><span>climate adaptation</span></a>
</div>
</div
<div class="circle_holder fourth">
<div class="circle pie">
<a href="#"><span>ghg footprint assessment</span></a>
</div>
</div
</div>
</div>
JS:
if ($.browser.msie || $.browser.version < 9) {
var circle = $('.circles .circle_holder > .circle');
$(circle).animate({
height: 168,
width: 168,
left: '0',
top: '0'
}, 1000);
if (window.PIE) {
$('.pie').each(function() {
PIE.attach(this);
});
}
}
$('.circles .circle_holder > .circle').each(function(i){
var time = 300 * (i + 1);
setTimeout(function(){
$('.circle').eq(i).addClass('open').animate({opacity: '1'}, i);
$('.circle a span').animate({opacity: '1'}, 4000);
}, time);
});
setTimeout(function() {
$('.circle').addClass('circles_loaded');
}, 3700);
$('.circles > .circle_holder > .circle').click( function(){
$('.inner_circles').removeClass('hidden', function() {
console.log($('.inner_circles').parent().hide());
$('.inner_circles').find().parent('.circle_holder').hide();
$('.inner_circles .circle').each(function(i){
var time = 300 * (i + 1);
setTimeout(function(){
$('.inner_circles .circle').eq(i).addClass('open').animate({opacity: '1'}, i);
$('.inner_circles .circle a span').animate({opacity: '1'}, 4000);
}, time);
});
});
});
这里有一个指向jsFiddle的链接,该链接包含所有HTML/CSS&JS:http://jsfiddle.net/thomasbritton/wV867/
如果有人能帮我解决这个问题,我会非常感激,因为我已经为此苦恼了好几个小时了。
如果有人愿意和我谈谈,如果这对事情有帮助的话,我会在skype上。
感谢
试图通过skype联系您,但您没有接受邀请
无论如何:点击气候变化和能源。
DEMO jsBin
很抱歉破坏了你的CSS,请完成JS,…:)
但我觉得这会有所帮助。看看CSS:你不必手动设置bg圆圈周围的元素。试着遵循这个概念,重做我留下的颜色。祝你好运
var $outerC = $('.circle').not('.inner_circles > div > .circle');
var cX = 120; // center - distance from left
var cY = 130; // center - distance from top
var rad = 190; // SET .box DISTANCE (Radius from center);
var boxN = $outerC.length;
function circus(){
$outerC.each(function(i,e){
thisWc = $(e).outerWidth(true)/2;
thisHc = $(e).outerHeight(true)/2;
var angle = (360/boxN)*i;
var X = Math.round(cX+rad* Math.sin(angle*Math.PI/180))-2;
var Y = Math.round(cY+rad*-Math.cos(angle*Math.PI/180))-2;
$(e).css({left:(X-thisWc), top:(Y-thisHc)});
});
}
circus();
function fader(){
$outerC.each(function(i,e){
var time = 300*i;
setTimeout(function(){
$(e).addClass('open').animate({opacity: '1'}, time);
$('.circle a span').animate({opacity: '1'}, 4000);
}, time);
});
}
fader();
$outerC.click(function(e){
e.preventDefault();
$outerC.fadeTo(300,0); // hide old ones
$outerC = $(this).next('.hidden').find('.circle'); // set new
boxN = $outerC.length;
$('.hidden').show();
$outerC.show();
fader();
circus();
});
你应该找到另一种更可编程的方法,将你的文本"居中"在你的圈子里。
值得一看:https://github.com/liri/moonMenuJS这不是一个完整的圆形菜单,但相当不错。