利用不同的 JS 元件來製作有如動畫效果的圖片,下面範例介紹一款好用的動畫效果的 js framework (GreenSock),GreenSock 裡面常用到 4種: TweenMax 、 TweenLite 、 TimelineLite 還有 TimelineMax , 底下利用 TweenMax 來做介紹(先講最後的效果就是當圖被點繫到時,會自動從大圖縮到小圖).. 1. 首先引用 cdn 來載入 Tween(沒引入那就GG了 ...): https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js 2. 加入程式碼: HTML: <p style="text-align:center"><img id= "pic" src="https://i.zzz.com/xxx.jpg" onClick="scaleSmall()" /></p> // 路徑照片 xxx.jpg 請自行置換 <p style="text-align:center">請點擊照片</p> JavaScript: function scaleSmall(){ var photo = document.getElementById("pic"); TweenMax.to(photo, 10, {width:150, height:100}); // 圖縮至 width height 大小 }