波紋

なんてことないけど,ちょろっと作ったから放置.webページに波紋が出ます.

var Ripple = {
    version : '0.0.0',
    cnt : 0,
    initRudi : 10,
    stepRudi : 20,
    stepOpa : 0.05,
    velocity : 100,
    linkData : new Array(),
    isIE : false,
    
    init : function(){
	Ripple.isIE = document.all;
	if(Ripple.isIE) document.body.attachEvent('onclick', Ripple.onRipple);
	else document.body.addEventListener('click', Ripple.onRipple, false);
    },
    onRipple : function(event){
	var e_x, e_y;
	e_x = Ripple.isIE ? window.event.clientX : event.pageX;
	e_y = Ripple.isIE ? window.event.clientY : event.pageY;
	
	var r_id = Ripple.cnt++;
	var ripple = document.createElement('img');
	
	ripple.setAttribute('src', './image/ripple.gif');
	ripple.setAttribute('id', r_id);
	ripple.style.position = 'absolute';
	ripple.style.width = Ripple.initRudi;
	ripple.style.height = Ripple.initRudi;
	if(Ripple.isIE)	ripple.style.filter = "alpha(opacity=80)";
	else ripple.style.opacity = 1.0;
	ripple.style.top = e_y - Ripple.initRudi / 2;
	ripple.style.left = e_x - Ripple.initRudi / 2;
	document.body.insertBefore(ripple, null);
	setTimeout("Ripple.widerRipple("+r_id+",0, "+Ripple.initRudi+")", Ripple.velocity);
    },
    widerRipple : function(r_id, time, rudi, fontdrift){
	this.fontdrift = fontdrift ? fontdrift : false;
	var ripple = document.getElementById(r_id);
	var opacity;
	opacity = Ripple.isIE ? ripple.style.filter.match(/\d+/) : ripple.style.opacity;
	
	if(opacity <= 0){
	    document.body.removeChild(ripple);
	}else{
	    rudi += Ripple.stepRudi;
	    ripple.style.width = rudi;
	    ripple.style.height = rudi;
	    ripple.style.top = parseInt(ripple.style.top.replace(/px/, '')) - Ripple.stepRudi / 2;
	    ripple.style.left = parseInt(ripple.style.left.replace(/px/, '')) - Ripple.stepRudi / 2;
	    if(Ripple.isIE) ripple.style.filter = 'alpha(opacity='+(opacity - Ripple.stepOpa * 100)+')'
	    else ripple.style.opacity -= Ripple.stepOpa;

	    var c_x = parseInt(ripple.style.left.replace(/px/, '')) + parseInt(ripple.style.width.replace(/px/, ''));
	    var c_y = parseInt(ripple.style.top.replace(/px/, '')) + parseInt(ripple.style.height.replace(/px/, ''));

	    setTimeout("Ripple.widerRipple("+r_id+","+(time+10)+", "+rudi+")", Ripple.velocity);
	}
	return;
    }
}

使い方は

<body onload="Ripple.init();">

とするだけです.あとはクリックをすると波紋が出ます.
画像は"./image/ripple.gif"となっていますが適当にしてください.
f:id:muddydixon:20061129185039g:image:w250