利用dom 動畫水紋制作
阿新 • • 發佈：2017-07-01
通過 半徑 radius ttr reat eat scrip dbd char
我們在制作之前先來配置一下我們基礎的東西
<!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;
現在我們的基本的聲明就已經做完了；我們在上面寫好了裝載的盒子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不斷的增加，也就是變圓，為了增強水波的效果，我加上了透明度這一個屬性也是不斷的變化的；
當然我不可能一直的將他變大下去，這樣瀏覽器也受不住，所以我將他變為全透明的時候，就將這個節點刪除掉，也就是第四步，
這樣的話 水波節點創造就做好了。
利用dom 動畫水紋制作