gpt4 book ai didi

javascript - Raphael js-onclick 改变颜色的 Action ?保持那个颜色直到返回点击其他

转载 作者:行者123 更新时间:2023-11-28 03:17:04 26 4
gpt4 key购买 nike

我评论了。我对这个库有疑问,因为这是我第一次使用它。花了几个小时寻找解决方案,但我没有找到。

我需要将鼠标悬停时的颜色更改为 X 颜色,并在没有鼠标悬停时恢复为原始颜色。

点击更改为 Y 颜色并保持不变,直到您再次点击,鼠标悬停保持运行。

我一直在这个带有 svg map 的例子的指导下:http://totaki.com/poesiabinaria/2014/10/crear-mapas-html5-interactivos-con-raphaeljs/

这是我的代码:

<link href="includes/css_includes/noticias_index.css" rel="stylesheet" type="text/css" />
<head>
<title>Ejemplo Raphaeljs</title>
<script type="text/javascript" src="includes/js_includes/jquery.min.js"></script>
<script type="text/javascript" src="includes/js_includes/raphael-min.js"></script>
</head>

<div class="contenido_noti">

<h1>RESULTADOS ELECCIONES 2012 - MUNICIPIOS</h1>

<center>
<table width="1180" border="0">
<tr>
<th scope="col">MAPA</th>
<th scope="col" style="text-align:center">ESTADISTICAS</th>
</tr>
<tr>
<th scope="col" width=""> <div id="lienzo">

</div></th>
<th scope="col" width="650" style="text-align:left">
<div id="municipiotxt"><img id="loadingicon" src="img_main/selecciona.png" /></div>
</th>
</tr>
</table>
</center>
<script>
var municipios_data = {
'ph1': 'Cadereyta de Montes',
'ph2': 'Jalpan de Serra',
'ph3': 'Colón',
'ph4': 'Querétaro',
'ph5': 'Pinal de Amoles',
'ph6': 'Arroyo Seco',
'ph7': 'Peñamiller',
'ph8': 'El Marqués',
'ph9': 'Tolimán',
'ph10': 'Landa de matamoros',
'ph11': 'Tequisquiapan',
'ph12': 'Pedro Escobedo',
'ph13': 'Ezequiel Montes',
'ph14': 'San Joaquín',
'ph15': 'Corregidora',
'ph16': 'Huimilpan',
'ph17': 'San Juan del Río',
'ph18': 'Amealco de Bonfil'};

var default_attributes = {
fill: '#999999',
stroke: '#000000',
'stroke-width': 1,
};
var $munictxt = $('#municipiotxt');

$.ajax({
url: 'includes/mapas/Mapa_muni.svg',
type: 'GET',
dataType: 'xml',
success: function(xml) {
var rjs = Raphael('lienzo', 570, 670);
var corr="";
$(xml).find('svg > g > path').each(function() {
var path = $(this).attr('d');
var pid = $(this).attr('id');
var pid_select="";
var munic = rjs.path(path);

munic.attr(default_attributes);
/*funcion de hover*/
munic.hover(function() {


this.animate({ fill: '#00bbff' });

}, /*funcion al moverso mouse*/ function() {


this.animate({ fill: default_attributes.fill});


}) /*funcion de click*/ .click(function() {
var muni_query=municipios_data[pid];
muni_select=pid;
$("#municipiotxt").load("includes/querys_includes/mapa_muni_SVG_QUERY.php",{muni_query:muni_query});
$munictxt.html(muni_select);
this.animate({ fill: '#FF0000' });

});
});
}
});

</script>

</div>

对不起,如果我的英语不好。

最佳答案

让我举一个简单的例子来说明如何做到这一点: http://jsfiddle.net/x0pv7580/

我创建所有需要的元素...

var rect1 = paper.rect(20,30,100,12).attr({fill: "orange"});   
...

并将它们放入一个数组中:

var elements = [rect1, rect2, rect3];
....

之后,每个元素都得到鼠标操作:

for(var i = 0; i< elements.length; i++) {
appendActionToElement(elements[i]);
}

这些是关键操作:

function appendElement(element) {


element.mouseover(function () { //on mouseover change to color X
this.attr('fill', 'green');
});

element.mouseout(function () { //on mouseout change color depending on status
if(!this.active)
this.attr('fill', 'orange');
else
this.attr('fill', 'white');
});

element.click(function() {
this.attr('fill', 'white'); //white should be your color Y
this.active = true; //set it active
for(var i = 0; i< elements.length; i++) {
if(elements[i] != this) { //very important, on click we loop through all elements
elements[i].active = false; //and set them inactive and orange.
elements[i].attr('fill', 'orange');
}

}
});
}

关于javascript - Raphael js-onclick 改变颜色的 Action ?保持那个颜色直到返回点击其他,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27085555/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com