出现水墨画的效果 先触发这个事件点击时 出现圆或者其它的形状 在写一个圆在页面上 到圆变大到一定程度时 在触发消失事件 还可以写随机数让大小不一样 先上个代码哈哈~

window.onload=function(){

 　　//第一部 添加点击事件
    var waterBox=document.getElementById('waterBox');
    waterBox.addEventListener('click',function(e){
        //获取坐标
        var me=e||event;
        var waterX = me.clientX - waterBox.offsetLeft - 25,
                waterY = me.clientY - waterBox.offsetTop - 25;
        var newDom;
        var addnum= 0,opacitynum=1;
        var set;

        document.getElementById('water_x').innerText=waterX;
        document.getElementById('water_y').innerText=waterY;

        //第二部 生成节点
        newDom = document.createElement('div');
        newDom.setAttribute('class','waterlist');
        newDom.style.left = waterX+'px';
        newDom.style.top = waterY+'px';

        waterBox.appendChild(newDom);

        //第三部 变换半径增长
        set=setInterval(function(){
            addnum+=2;
            opacitynum-=0.1;
            newDom.style.padding=addnum+'px';
            newDom.style.opacity=opacitynum;

            //第四部 删除
            if(opacitynum<0){
                clearInterval(set);
                waterBox.removeChild(newDom);
            }
        },100);

        //阻止生成每个节点的 冒泡事件
        newDom.addEventListener('click',function(e){
            e.stopPropagation();
        })

    });
}