jQuery是一個廣泛使用的JavaScript庫,它主要用于簡化HTML文檔遍歷、事件處理、動畫效果和Ajax交互等操作。其中,360度旋轉(zhuǎn)是一種非常酷炫的動畫效果,可以給網(wǎng)頁增添活力和吸引力。
$(function() { var degree = 0; var $img = $('.rotate'); function rotate() { degree += 5; $img.css({ 'transform': 'rotate(' + degree + 'deg)' }); requestAnimationFrame(rotate); } rotate(); });
上面是一個簡單的360度旋轉(zhuǎn)的jQuery代碼,它利用transform的rotate方法來實現(xiàn)圖片的旋轉(zhuǎn),并且借助requestAnimationFrame函數(shù)來實現(xiàn)平滑自然的動畫效果。將上述代碼復(fù)制到HTML文件中,并確保HTML文件中有加入jQuery代碼庫,即可在網(wǎng)頁中看到一個旋轉(zhuǎn)的圖片效果。
需要注意的是,如果要實現(xiàn)圖片自動旋轉(zhuǎn)效果,可以通過setInterval函數(shù)定時調(diào)用旋轉(zhuǎn)函數(shù),或者使用CSS3的animation屬性實現(xiàn)旋轉(zhuǎn)動畫。同時,在進行360度旋轉(zhuǎn)時,為了提高兼容性,需同時加上-webkit-transform和-moz-transform這兩個瀏覽器前綴。