なんてことないけど，ちょろっと作ったから放置．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"となっていますが適当にしてください．
