JQuery.rotate.js是一個基于jQuery的插件,在旋轉元素時提供了更好的可控性和穩定性。您可以在任何東西上使用它 - 圖片,DIV,SVG等等。
這是該插件的一個基本示例:
$('.rotate-btn').click(function() { $('.rotate-div').rotate({ angle: 0, animateTo: 180, easing: $.easing.easeInOutExpo }); });
使用JQuery.rotate.js時,您需要為目標元素設置初始角度,并定義想要將其旋轉到的角度。
如果您想要通過單擊按鈕以90度遞增旋轉,那么您可以這樣做:
var angle = 0; $('.rotate-btn').click(function() { angle +=90; $('.rotate-div').rotate({ animateTo: angle }); });
除了上面的選項,JQuery.rotate.js還提供了許多其他選項,如動畫持續時間,旋轉方向等。
總的來說,通過使用JQuery.rotate.js,您可以更輕松地實現旋轉效果,即使您不是一位直接在CSS中進行編碼的開發人員。
上一篇vue引入圖片資源