-1

我正在使用 Raphael 图形和动画，这是一个 javascript 库。我希望用户将鼠标悬停在底行中间列的蓝色方块上。当他们将鼠标悬停时，我希望蓝色框发光（拉斐尔函数）黑色。我正在尝试在 rec8 上使用此功能，但我认为我做得不对。有人可以更正我的代码或帮助我。谢谢。：） 健康长寿·繁荣昌盛。

<html>
<head><title></title>
<script src="raphael-min.js"></script>
<script src="jquery-1.7.2.js"></script>

<style type="text/css"> 
#input
{
margin-top:-200px;

}
</style>

</head>

<body>

<div id="draw-here-raphael" style="height: 400px; width: 400px; background: #666; z-index:0;">
</div>

<div id="input" style="z-index:99;" >
  <input type="text" value="0"; style="text-align:right;" /><br />
</form> 
  </div>

<script type="text/javascript">
//all your javascript goes here
$(function() {
var r = new Raphael("draw-here-raphael"),

    // Store where the box is
    position = 'left',

    // Make our pink rectangle
    rec = r.rect(20, 20, 250, 300, 10).attr({"fill": "#fbb"});

    $("rect").mouseover(function(e) {
        $(this).attr({"fill": "red"});
        });
    $("rect").mouseout(function(e) {
        $(this).attr({"fill": "#fbb"});
    }); 
    //first column
    rec2 = r.rect(30, 80, 50, 40, 5).attr({"fill": "blue"});
    rec3 = r.rect(30, 130, 50, 40, 5).attr({"fill": "blue"});
    rec4 = r.rect(30, 180, 50, 40, 5).attr({"fill": "blue"});
    rec5 = r.rect(30, 240, 50, 40, 5).attr({"fill": "blue"});
    //second column
    rec6 = r.rect(90, 80, 50, 40, 5).attr({"fill": "blue"});
    rec2 = r.rect(90, 130, 50, 40, 5).attr({"fill": "blue"});
    rec7 = r.rect(90, 180, 50, 40, 5).attr({"fill": "blue"});
    rec8 = r.rect(90, 240, 50, 40, 5).attr({"fill": "blue"});
        $("rec8").mouseover(function(e) {
        $(this).glow({width:10});
        });
    $("rec8").mouseout(function(e) {
        $(this).glow({width:0});
    }); 
    //third column
    rec9 = r.rect(150, 80, 50, 40, 5).attr({"fill": "blue"});
    rec10 = r.rect(150, 130, 50, 40, 5).attr({"fill": "blue"});
    rec11 = r.rect(150, 180, 50, 40, 5).attr({"fill": "blue"});
    rec12 = r.rect(150, 240, 50, 40, 5).attr({"fill": "blue"});
});

</script>

</body>
</html>
4

2 回答 2

2

这个选择器：

$("rec8")

是任何<rec8 />标签的 jQuery 选择器。那些可能不存在。您应该将鼠标事件附加到返回的 raphael 元素：

rec8 = r.rect(90, 240, 50, 40, 5).attr({"fill": "blue"});
rec8.mouseover(function(e) {
    this.glow({width:10});
    });
rec8.mouseout(function(e) {
    this.glow({width:0});
});

但是由于某种原因，当我鼠标退出时它并没有消失

那是因为glow返回一个代表发光的新集合，因此您需要将其删除。从拉斐尔文档：

注意：辉光未连接到元素。如果您更改元素属性，它不会自行调整。

您需要跟踪setRaphael 作为辉光的一部分给您的返回，并将其删除。或许是这样的：

var rec8 = r.rect(90, 240, 50, 40, 5).attr({"fill": "blue"});
var rect8glow;
rec8.mouseover(function(e) {
    rect8glow = this.glow({width:10});
    });
rec8.mouseout(function(e) {
    rect8glow.remove();
});

你可以在这里看到一个工作演示。

于 2012-07-16T15:04:44.097 回答
1

请参阅此小提琴以获取实时解决方案：http: //jsfiddle.net/zhj2r/3/
正如 vcsjones 所说，您正在结合 jquery 和 raphael，但它们不相关。
通过$(this)将 raphael 对象包装在 jquery 函数调用中，这是错误的，并且$('rec4')不是有效的 jquery 选择器。
此外，该glow函数返回一组显示目标对象轮廓的 svg 路径，因此通过调用glow({width : 0})，您不会修改实际发光的宽度，而是生成另一个宽度为 0 的发光元素。
这是我在为了让您的代码工作： 

rec.mouseover(function(e) {
    this.attr({"fill": "red"});
});
rec.mouseout(function(e) {
    this.attr({"fill": "#fbb"});
}); 
// ...
rec8.mouseover(function(e) {
    // keep a reference to the glow object so you can remove it later
    this.theGlow = this.glow({width:10});
});
rec8.mouseout(function(e) {
    this.theGlow.remove();
});
于 2012-07-16T15:16:58.147 回答