JavaScript是一種強大的編程語言，它可以用來創建動態圖形，使頁面更加生動有趣。通過JavaScript，我們可以實現一些很酷的動態效果，例如鼠標懸停，頁面滾動，按鈕點擊等等。下面我們來詳細介紹一下JavaScript做動態圖的方法。

首先，我們可以利用JavaScript來控制元素的顯示和隱藏。比如我們可以通過鼠標懸停的事件來顯示或隱藏一幅圖片。下面是一個簡單的例子：

<div onmouseover="document.getElementById('img').style.display='block'" onmouseout="document.getElementById('img').style.display='none'">
懸停這里
<img id="img" src="example.jpg" style="display:none;">
</div>

這個例子中，我們用到了onmouseover和onmouseout事件來觸發顯示或隱藏圖片。當鼠標懸停在div上時，JavaScript會將id為“img”的圖片元素的display屬性設為“block”，從而顯示圖片。當鼠標移出div時，JavaScript會將該圖片的display屬性設為“none”，從而隱藏圖片。

另外，我們也可以用JavaScript來實現圖像的旋轉和縮放。下面是一個例子：

<div style="position:relative;">
<img src="example.jpg" style="position:absolute; left:0; top:0; width:100px; height:100px; transform: rotate(0deg);">
<button onclick="document.getElementById('img').style.transform='rotate(45deg)'">旋轉圖片</button>
<button onclick="document.getElementById('img').style.transform='scale(1.5)'">放大圖片</button>
</div>

這個例子中，我們利用了transform屬性來實現圖片的旋轉和縮放。通過按鈕的點擊事件，我們可以改變圖片的transform屬性，從而實現動態效果。

除此之外，JavaScript還可以用來制作瀑布流布局和輪播圖等常見的動態效果。例如下面是一個瀑布流布局的實現代碼：

<div id="container">
<div class="box"></div>
<div class="box"></div>
<!-- 這里還有很多box -->
</div>
<script>
window.onload = function() {
var container = document.getElementById('container');
var boxes = container.getElementsByTagName('div');
var boxWidth = boxes[0].offsetWidth;
var cols = Math.floor(document.documentElement.clientWidth / boxWidth);
var heightArr = [];
for (var i = 0; i < boxes.length; i++) {
if (i < cols) {
heightArr.push(boxes[i].offsetHeight);
} else {
var minHeight = Math.min.apply(null, heightArr);
var minIndex = heightArr.indexOf(minHeight);
boxes[i].style.position = 'absolute';
boxes[i].style.left = minIndex * boxWidth + 'px';
boxes[i].style.top = minHeight + 'px';
heightArr[minIndex] += boxes[i].offsetHeight;
}
}
}
</script>

通過JavaScript，我們可以實現瀑布流布局。我們首先計算每一列的寬度，然后用一個數組來記錄每一列的高度，每個box元素的位置都在數組中高度最小的一列下方，隨著元素的添加，高度數組的值不斷更新。

不管你想做什么動態效果，JavaScript都是一個非常有力的工具。如果你想讓你的網站更加吸引人，不妨嘗試一下用JavaScript來制作一些動態圖。