我们在制作之前先来配置一下我们基础的东西
<!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不断的增加，也就是变圆，为了增强水波的效果，我加上了透明度这一个属性也是不断的变化的；
当然我不可能一直的将他变大下去，这样浏览器也受不住，所以我将他变为全透明的时候，就将这个节点删除掉，也就是第四步，
这样的话 水波节点创造就做好了。