我们在制作之前先来配置一下我们基础的东西
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#waterBox{
width: 800px;
height: 400px;
background-color: #e0dbdb;
margin: auto;
position: relative;
/*overflow: hidden;*/
}
.waterlist{
position: absolute;
left: 0;
top: 20px;
width: 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不断的增加，也就是变圆，为了增强水波的效果，我加上了透明度这一个属性也是不断的变化的；
当然我不可能一直的将他变大下去，这样浏览器也受不住，所以我将他变为全透明的时候，就将这个节点删除掉，也就是第四步，
这样的话 水波节点创造就做好了。
时间： 2024-08-26 16:35:27