js实现图片旋转动画的封装

末蓝、 2022-07-16 01:48 182阅读 0赞

//图片动画封装
        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);
    
            setTimeout(() => {
                this.stopAnim();
            }, this.opts.duration);
        }
        SearchAnim.prototype.stopAnim = function() {
            if (this.timer != null) {
                clearInterval(this.timer);
            }
        }
        SearchAnim.DEFAULTS = {
            duration : 60000,
            delay : 200,
            direction : true,
            startIndex : 0,
            endIndex : 360
        }

使用方法：

随便创建一img标签

然后如下调用即可：

new SearchAnim({
                elemId : "wait-icon",
                delay : 20,
            });

发表评论取消回复

表情：

评论列表（有 0 条评论，182人围观）

还没有评论，来说两句吧...

相关阅读

相关 js动画封装

js动画封装凡是可以看到过渡效果的基本都可以用到js动画，都能引用 <!-- ani() 作用：动画给某个元素查看某个css 属性值

超、凢脫俗/ 2023年06月25日 10:08/ 0 赞/ 1 阅读

相关 Spin.js旋转的加载动画

转载文章：[前端新兵][Link 1] 看到Spin官网的介绍：Uses VML as fallback in IEs，说是老的IE使用VML制作效果，IE6也支持，不

爱被打了一巴掌/ 2022年08月13日 11:48/ 0 赞/ 153 阅读

相关 JS动画封装

简单的运动函数 var demo1=document.getElementById("demo1"); demo1.onmouseover=funct

叁歲伎倆/ 2022年08月04日 05:22/ 0 赞/ 173 阅读

相关 js实现图片旋转动画的封装

//图片动画封装 function SearchAnim(opts) { for(var i in SearchAnim.DEF

末蓝、/ 2022年07月16日 01:48/ 0 赞/ 183 阅读

相关 css3图片旋转动画

参考网站：[http://www.17sucai.com/pins/tag/6188.html][http_www.17sucai.com_pins_tag_6188.html

妖狐艹你老母/ 2022年06月13日 13:47/ 0 赞/ 301 阅读

相关 css 实现图片旋转

鼠标放在图片上旋转180度可用在头像上比较俏皮效果如下： ![这里写图片描述][70] 代码如下： <!DOCTYPE html> <html>

野性酷女/ 2022年05月17日 06:27/ 0 赞/ 270 阅读

相关 Android 围绕图片中心的旋转动画

本文主要介绍Android中如何使用rotate实现图片不停旋转的效果。Android 平台提供了两类动画，一类是 Tween 动画，即通过对场景里的对象不断做图像变换(平移、

偏执的太偏执、/ 2022年01月11日 08:01/ 0 赞/ 333 阅读

相关 opencv实现图片旋转和c语言实现图片旋转

1,opencv实现图片旋转： import cv2 import numpy as np img = cv2.imread('image0.jpg'

雨点打透心脏的1/2处/ 2021年11月16日 13:46/ 0 赞/ 414 阅读

相关旋转动画

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset=

浅浅的花香味﹌/ 2021年11月11日 00:24/ 0 赞/ 377 阅读

相关 Exif.js图片旋转修正

上传后图片旋转修正测试流程上传 -> base64展示 -> 获取旋转值 -> 修正 -> 修正后展示 -> 转换`blob`和`file`文件供其他功能调用

我不是女神ヾ/ 2021年07月04日 22:06/ 0 赞/ 503 阅读