利用dom 动画水纹制作

我们在制作之前先来配置一下我们基础的东西

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #waterBox{
             800px;
            height: 400px;
            background-color: #e0dbdb;
            margin: auto;
            position: relative;
            /*overflow: hidden;*/
        }
        .waterlist{
            position: absolute;
            left: 0;
            top: 20px;
             10px;
            height: 10px;
            background-color: #f40;
            border-radius: 50%;
            opacity: 1;
        }
    </style>
</head>
<body>
    <h2>div的水波效果</h2>

    <div id="waterBox">
        <!-- <div class="waterlist"></div> -->
    </div>    
</body>
<script>
window.onload = function(){
    var num = 0;
    //第一步 添加点击事件
    var waterBox = document.getElementById('waterBox');
    waterBox.addEventListener('click',function(e){
        

}

</script>
</html>

现在我们的基本的声明就已经做完了；我们在上面写好了装载的盒子div，并将其加上了一个点击的事件；接下来我们需要给事件添加内容

<script>
window.onload = function(){
    var num = 0;


    //第一步 添加点击事件
    var waterBox = document.getElementById('waterBox');
    waterBox.addEventListener('click',function(e){
        num++;
        /*alert(1);*/
        var me = e || event ;
        var waterX = me.clientX - waterBox.offsetLeft -0, 
            waterY = me.clientY - waterBox.offsetTop -0;
}

</script>

第一步 添加点击事件

我们在逐步的将点击事件里获取到div中的鼠标位置，作为我们水纹的出来时的位置

<script>
window.onload = function(){
    var num = 0;


    //第一步 添加点击事件
    var waterBox = document.getElementById('waterBox');
    waterBox.addEventListener('click',function(e){
        num++;
        /*alert(1);*/
        var me = e || event ;
        var waterX = me.clientX - waterBox.offsetLeft -0, 
            waterY = me.clientY - waterBox.offsetTop -0;
        var newDom;
        var addnum = 0,opacitynum = 1;
        var set;//第二部生成节点
        newDom = document.createElement('div');
        newDom.setAttribute('class','waterlist');

        newDom.style.left = waterX + "px";
        newDom.style.top = waterY + "px";

        waterBox.appendChild(newDom);

        
</script>

第二部节点的生成

document.createElement('div');生成一个新的节点，并将他的class设置为我们已经设置好的文本样式

newDom.style.left = waterX + "px";再将我们的关于位置的坐标给复制上去

最后在将其appendChild在父级元素的下面

<script>
window.onload = function(){
    var num = 0;


    //第一步 添加点击事件
    var waterBox = document.getElementById('waterBox');
    waterBox.addEventListener('click',function(e){
        num++;
        /*alert(1);*/
        var me = e || event ;
        var waterX = me.clientX - waterBox.offsetLeft -0, 
            waterY = me.clientY - waterBox.offsetTop -0;
        var newDom;
        var addnum = 0,opacitynum = 1;
        var set;//第二部生成节点
        newDom = document.createElement('div');
        newDom.setAttribute('class','waterlist');

        newDom.style.left = waterX + "px";
        newDom.style.top = waterY + "px";

        waterBox.appendChild(newDom);

        // 第三部 变化半径增长
        set = setInterval(function(){
            console.log("第"+num+"次点击的参数"+addnum);
            addnum += 5;
            opacitynum -= 0.1;//透明属性
            newDom.style.padding = addnum+'px';
            newDom.style.opacity = opacitynum;
            //第四部 删除节点
            if( opacitynum < 0 ){
                clearInterval(set);
                waterBox.removeChild(newDom);
            }

        },100);

}

</script>

因为我们的第三步和第四步是在一起的，所以我就将他放在一起讲了，

我们通过setinterval将他不断的循环使其的padding不断的增加，也就是变圆，为了增强水波的效果，我加上了透明度这一个属性也是不断的变化的；

当然我不可能一直的将他变大下去，这样浏览器也受不住，所以我将他变为全透明的时候，就将这个节点删除掉，也就是第四步，

这样的话水波节点创造就做好了。