YUIでクリックした場所へ移動(2ページ目)

YUIでクリックした場所へ移動

---

1: クリックした場所を取得する
2: クリックした場所へ移動する

クリックした場所へ移動する

前ページのサンプルでは、クリック位置を取得するメソッドを試しました。 これをYAHOO.util.Motionの「to」に設定すれば、クリック位置へ移動させることができます。

下記サンプルでは、X値(left)を返すYAHOO.util.Event.getPageX(ev)とY値(top)を返すYYAHOO.util.Event.getPageY(ev) を使って、クリック位置の値を取得するように設定しています。








ソースは次の通りです。

<script type="text/javascript">

//ネームスペースを作成
YAHOO.namespace('myTest200707102');

YAHOO.myTest200707102.chkXY = function (ev){ 

    var id = 'test2';
    var E  = YAHOO.util.Event; //YAHOO.util.Eventショートカット
    var x  = E.getPageX(ev);
    var y  = E.getPageY(ev);
    
    var myMotion = new YAHOO.util.Motion(
      id , { points : { to: [x,y] } } ,0.2
    );
    
    myMotion.animate();//モーション実行

};


//クリックしたらYAHOO.myTest200707102.chkXYを実行
YAHOO.util.Event.addListener(document,'click',YAHOO.myTest200707102.chkXY);

</script>

<div style="position:relative">
<div id="test2" 
      style="position:absolute;left:0px;top:0px;
             width:100px;height:100px;padding:10px;
             background-color:#c3ff23">
             クリックした場所へ移動します
             </div>
</div>

このソースのtoプロパティは、getXYを利用して次のように、さらに簡単に書くこともできます。

    var xy = E.getXY(ev);
    
    var myMotion = new YAHOO.util.Motion(
      id , { points : { to: xy } } ,0.2
    );
    

まだまだ、YUIシリーズは続きますのでお楽しみに。