Happy Programming

package {
    import flash.display.Sprite;
    import flash.events.Event;
    
    public class Pulse extends Sprite {
        private var ball:Ball;
        private var angle:Number = 0;
        private var centerScale:Number = 1;
        private var range:Number = .5;
        private var speed:Number = .1;
        
        public function Pulse() {
            init();
        }
        
        private function init():void {
            ball = new Ball(100);
            addChild(ball);
            ball.x = stage.stageWidth / 2;
            ball.y = stage.stageHeight / 2;
            addEventListener(Event.ENTER_FRAME, onLoop);
        }
        
        private function onLoop(evt:Event):void {
            ball.scaleX = Math.sin(angle) * range + centerScale;
            ball.scaleY = Math.sin(angle) * range + centerScale;
            angle += speed;
        }
    }
}

出来上がったムービーはこんな感じだ。

これをjavascriptでやろうとすると

Event.observe(window, 'load', function(event) {
    var angle = 0;
    var range = .2;
    var speed = .1;
    var inWidth = parseInt($('move').getStyle('width'));
    var inHeight = parseInt($('move').getStyle('height'));
    var inLeft = parseInt($('move').getStyle('left'));
    var inTop = parseInt($('move').getStyle('top'));
    var timeId;
    $('move').observe('mouseover', function(event) {
        var func = arguments.callee;
        $('move').stopObserving('mouseover', func);
        timeId = setInterval(function() {
            var width = inWidth + Math.sin(angle) * range * inWidth;
            var height = inHeight + Math.sin(angle) * range * inHeight;
            var left = inLeft + ((inWidth - width) / 2);
            var top = inTop + ((inHeight - height) / 2);
            $('move').setStyle({
                width: width + 'px',
                height: height + 'px',
                top: top + 'px',
                left: left + 'px'
            });
            angle += speed;
        }, 30);
        $('move').observe('mouseout', function(event) {
            clearInterval(timeId);
            $('move').observe('mouseover', func);
        });
    });
});

こんなコードになる
下の写真にマウスを重ねると上のswfと同じような動きをする。

上のコードだとwidthプロパティ、heightプロパティ共に同じ処理（Math.sin）をしているためwidthが大きくなれば同じくheightも大きくなるようになっているが、例えば片方に（Math.cos）を施した場合上下や左右に引っ張ったような効果を得られる。
下の写真はそんな感じだ。