如何使用jQuery實作一個圖片不停旋轉動畫效果

在網頁製作中，使用動畫效果可以增強頁面的生動性和吸引力，實現一個圖片不停旋轉的效果是其中的一種，可以為頁面增加更加視覺衝擊力和藝術感。在本文中，我們將介紹如何使用 jQuery 實作一個簡單的圖片不停旋轉動畫效果。

1. 準備工作

首先，我們需要準備一個圖片，然後將其儲存到本機。在這裡，我們將使用一個叫做「spinner.gif」的動態圖片，你可以從網路上下載一個類似的圖片來替換 。

2. 引入 jQuery 函式庫

在實作動畫效果前，需要先引入 jQuery 函式庫，這段程式碼應該放在 head 標籤中。

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

3. 實作圖片不停旋轉效果

在HTML 檔案中新增一個div 元素，然後在CSS 檔案中設定該元素的寬度和高度，以及背景圖片。同時也需要設定該元素的 transform 屬性，將其旋轉。程式碼如下所示：

<div class="spinner"></div>

<style type="text/css">
    .spinner {
        width: 100px;
        height: 100px;
        background: url('spinner.gif') no-repeat center center;
        transform: rotate(0deg);
    }
</style>

接著，在jQuery 中加入下面的程式碼，實作圖片不停旋轉的效果：

<script type="text/javascript">
    $(function(){
        var spinner = $('.spinner'); // 获取到 div 元素
        var deg = 0; // 设定图片的初始旋转度数为0
        setInterval(function(){
            deg += 1; // 旋转的度数每次增加1度
            spinner.css({'transform': 'rotate('+deg+'deg)'}); // 设置图片旋转的度数
        }, 10);
    });
</script>

在程式碼中，使用了jQuery 的setInterval() 函數來實現定時操作。在 setInterval 中，設定了 deg 變數的初始值為0度，並且每隔10毫秒將 deg 值增加1度。同時，透過改變 CSS 的 transform 屬性，旋轉 div 元素中的圖片。最終，頁面將呈現出一張不停旋轉的圖片效果。

4. 小結

在本文中，我們學習如何使用 jQuery 實作一個簡單的圖片不停旋轉效果。透過將圖片旋轉的度數設定為每隔一定時間自動增加，實現了圖片即時旋轉的效果。這種動畫效果可以增加頁面的生動性和吸引力，是網頁製作常用的一種，希望這篇文章對大家有幫助。

以上是如何使用jQuery實作一個圖片不停旋轉動畫效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！