-1

私はjavascriptライブラリであるRaphaelグラフィックとアニメーションを使用しています。下の行、中央の列にある青い四角にマウスを合わせてほしい。マウスオーバーすると、青いボックスが黒く光ります（ラファエル機能）。この関数を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セレクターです。それらはおそらく存在しません。返されたラファエル要素にマウスイベントをアタッチする必要があります。

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は、グローを表す新しいセットが返されるため、削除する必要があるためです。Raphaelのドキュメントから：

注：グローは要素に接続されていません。要素の属性を変更しても、それ自体は調整されません。

setあなたはラファエルが輝きの一部としてあなたに与えるリターンを追跡し、それを取り除く必要があります。おそらくこのように：

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を組み合わせていましたが、これらは関連していません。
raphael$(this)オブジェクトを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 に答える