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