这是 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);
}
}