2

我的英语很垃圾，但我想试试。

那是我修改的版本，这些矢量彩色按钮是。当您单击每个按钮时，我试图显示一个文本。但是当我单击其他按钮时，文本重叠，如下图所示：

http://i.stack.imgur.com/S39dX.png

这是处理事件的代码：

$('.get').find('.arc').each(function(i){
        var t = $(this), 
            color = t.find('.color').val(),
            value = t.find('.percent').val(),
            text = t.find('.text').text();

            conteudo = t.find('.conteudo').text();
            alet = ( 11.25 * i );

            /*title.rotate(20.25 * i);*/

        rad = arco_espaco;  
        var z = r.path().attr({ arc: [value, color, rad], 'stroke-width': arco_width,});
        var zm = r.path().attr({ arc: [value, color, rad], 'stroke-width': arco_width, opacity: 0}).toFront();/*MASK*/

        var title = r.text(220, 0, defaultText).attr({
            font: '20px Arial',
            fill: '#fff'
            }).toFront();
            title.rotate(11.25*(i+0.40),-1,5);

        var texto = r.text(300, 10,  conteudo).attr({
            font: '20px Arial',
            fill: '#fff',
            "text-anchor":"start",
            opacity: 0
            }).toFront();



        var group = r.set();
        group.push(z);
        group.push(title);
        ativo = 1;



        zm.mouseover(function(){
            group.animate({ 'stroke-width': arco_ganho, opacity: .75 }, 1000, 'elastic');
            if(Raphael.type != 'VML') //solves IE problem
            title.stop().animate({ opacity: 1 }, speed, '>', function(){
                title.attr({ text: text + '\n'}).animate({ opacity: 1 }, 50, '<');
                title.toFront();
                zm.toFront();

            });

            document.body.style.cursor = "pointer";


        zm.mouseout(function(){
        zm.toFront();
            group.stop().animate({ 'stroke-width': arco_width, opacity: 1 }, speed*4, 'elastic');
            title.stop().animate({ opacity: 0 }, speed, '>', function(){
                title.attr({ text: defaultText }).animate({ opacity: 0 }, speed, '<');
                title.attr({ text: text + '\n'  }).animate({ opacity: 0, align: left }, speed, '<');

            }); 
            document.body.style.cursor = "auto";

        });

        zm.click(function () {
        $("#diagram").css("background-color",color);
        texto.attr({opacity: 1});
        tempp = texto;

        });


        })

        zm.toFront();
    });

文本来自 html 文件：

<div class="get">
        <div class="arc">
            <span class="text">Secretaria</span>
            <input type="hidden" class="percent" value="100" />
            <input type="hidden" class="color" value="#f6c201" />
            <span class="conteudo">TEEEEEXXXXXXTT >>>SECRETARIA<<<</span>
        </div>

        <div class="arc">
            <span class="text">Financeiro</span>
            <input type="hidden" class="percent" value="100" />
            <input type="hidden" class="color" value="#97BE0D" />
            <span class="conteudo">TEEE-------XTT >>>FINANCEIRO<<<</span>

        </div>
</div>

参见 jsbin http://jsbin.com/unojov/2/edit

4

0 回答 0