html js设置旋转动画效果图,JS实现图片旋转动画效果封装与使用示例

本文实例讲述了JS实现图片旋转动画效果封装与使用。分享给大家供大家参考，具体如下：

核心封装代码如下：

//图片动画封装

function SearchAnim(opts) {

for(var i in SearchAnim.DEFAULTS) {

if (opts[i] === undefined) {

opts[i] = SearchAnim.DEFAULTS[i];

}

}

this.opts = opts;

this.timer = null;

this.elem = document.getElementById(opts.elemId);

this.startAnim();

}

SearchAnim.prototype.startAnim = function () {

this.stopAnim();

this.timer = setInterval(() => {

var startIndex = this.opts.startIndex;

if (startIndex == 360) {

this.opts.startIndex = 0;

}

this.elem.style.transform = "rotate("+ (startIndex) +"deg)";

this.opts.startIndex += 5;

}, this.opts.delay