1

这是 Neil 回答的较早主题的延续 - 谢谢 Neil！我可能应该在第一个问题中包含这个，但我想简化一些事情......

我需要的另一个功能是有一个“对话框”，其中包含一个标题和一些文本，当它出现时，它会在圆圈旁边打开和关闭。在 Neil 的帮助之前，我在早期版本中实现了这一点。我花了一些时间尝试将它集成到新的和改进的代码中，并获得了一些意想不到的结果。例如，如果我翻转右侧的第一个圆圈，它应该可以正常工作，但是，如果我尝试翻转中间和右侧的圆圈，它们就不起作用。奇怪的是，如果我刷新并从右边的圆圈开始，从右向左移动时每个都会起作用，直到我到达左边的圆圈，然后中间和右边不起作用——但左边的圆圈继续起作用。此外，如果我点击左边的圆圈，它应该可以正常工作，但是其他的就不行了。反之，

我正在寻找的行为是每个圆圈，在鼠标悬停时使用动态文本淡入圆圈旁边的矩形进行动画处理，并在鼠标悬停时使用文本淡出的矩形进行动画处理。如果用户将鼠标悬停在单击的圆圈上，带有文本的矩形应该在单击时淡出并且不会再次淡出（我猜也需要删除 mouseover 事件）。需要发生的另一件事是矩形需要出现在圆上的不同位置，这取决于它在地图上的位置——这样它就不会从地图上掉下来。我在早期版本中成功地做到了这一点，但为了更清楚起见，我在上一篇文章中省略了这一点。我会将它包含在这里，以便您了解我正在做的事情的要点。

我的猜测是我需要创建一个矩形/文本组件的 set() 并将其与圆圈一起放在另一个 set() 中？

对此的任何帮助都非常感谢！谢谢

// JavaScript Document

var arr = [
    [50, 50, "this", "Is text that is to be the abstract"],
    [100, 50, "that", "Is text that I hope is here"],
    [150, 50, "another thing", "Even more text"]
];
var currRect;
var currTitleTxt;
var currTeaseTxt;
var prevItem;

doMe();

function doMe() {
var paper = new Raphael(document.getElementById('canvas_container'), 696, 348);
for (var i = 0; i < arr.length; i++) {
    paper.circle(arr[i][0], arr[i][1], 6).attr({
        fill: '#fff',
        'fill-opacity': 0.5
    }).data("i", [arr[i][0], arr[i][1], arr[i][2], arr[i][3]]).click(function () {
        this.unmouseout();
    }).click(function () {
        if (this.data('selected') != 'true') {
            if (prevItem != null) {
                prevItem.data('selected', '');
                handleOutState(prevItem);
            }
            prevItem = this.data('selected', 'true');
            currRect.animate({"fill-opacity":0, "stroke-opacity":0}, 150 );
    currTitleTxt.animate({"fill-opacity":0}, 150 );
    currTeaseTxt.animate({"fill-opacity":0}, 150 );


        }

    }).mouseover(function () {
        handleOverState(this);
        if(this.data("i")[0] <= 350){ //this is where I test for the position on the map
           paper.setStart(); //create rectangle and text set
            currRect =paper.rect(17, -20, 265,90).attr({fill:"#999","fill-opacity":0.5});
            currTitleTxt = paper.text(25, -8, this.data("i")[2]).attr({"text-anchor":"start",fill:'#ffffff',"font-size": 14, "font-weight":"bold","fill-opacity":0});
            currTeaseTxt = paper.text(25, 30).attr({"text-anchor":"start",fill:'#eeeeee',"font-size": 11, "font-weight":"bold","fill-opacity":0});
            var maxWidth = 250;

var content = this.data("i")[3];
var words = content.split(" ");

var tempText = ""; //since Raphael doesn't have native word wrap, I break the line manually
for (var i=0; i<words.length; i++) {
  currTeaseTxt.attr("text", tempText + " " + words[i]);
  if (currTeaseTxt.getBBox().width > maxWidth) {
    tempText += "\n" + words[i];
 } else {
   tempText += " " + words[i];
 }
}

currTeaseTxt.attr("text", tempText.substring(1));

var st = paper.setFinish();
st.translate(this.data("i")[0]+10, this.data("i")[1]+0).animate({"fill-opacity":1}, 150 );

 }else if(this.data("i")[0] >= 351){ //this is where I test for the position on the map
paper.setStart();
currRect = paper.rect(-280, -20, 250,50).attr({fill:"#999","fill-opacity":0.5});
currTitleTxt = paper.text(-270, -10, this.data("i")[2]).attr({"text-anchor":"start",fill:'#ffffff',"font-size": 14, "font-weight":"bold","fill-opacity":0});
currTeaseTxt =paper.text(-270, 5, this.data("i")[3]).attr({"text-anchor":"start",fill:'#cccccc',"font-size": 12, "font-weight":"bold","fill-opacity":0});
var st = paper.setFinish();
st.translate(this.data("i")[0]+10, this.data("i")[1]+0).animate({"fill-opacity":1}, 150 );
       }
    }).mouseout(function () {
        currRect.animate({"fill-opacity":0, "stroke-opacity":0}, 150 );
        currTitleTxt.animate({"fill-opacity":0}, 150 );
        currTeaseTxt.animate({"fill-opacity":0}, 150 );
        if (this.data('selected') != 'true') handleOutState(this);
    });
}

    function handleOverState(el) {
        el.animate({
        r: 8
        }, 250).animate({
        "fill-opacity": 1
        }, 150);

    }

    function handleOutState(el) {
        el.animate({
        r: 6
        }, 250).animate({
        "fill-opacity": 0.5
        }, 150);

    }

}
4

0 回答 0