JS实现图片旋转动画效果封装与使用示例

更新时间：2018年07月09日 09:52:02 作者：_小小黑

这篇文章主要介绍了JS实现图片旋转动画效果封装与使用,结合实例形式分析了JavaScript实现图片元素旋转的相关功能代码的封装与使用操作技巧,需要的朋友可以参考下

本文实例讲述了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);
    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,
});

完整示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net JS旋转动画</title>
</head>
<img src="//img.jbzj.com/file_images/article/201807/201879100307926.jpg" id="wait-icon"/>
<script>
//图片动画封装
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
}
new SearchAnim({
  elemId : "wait-icon",
  delay : 20,
});
</script>
<body>
</body>
</html>

使用本站HTML/CSS/JS在线运行测试工具：http://tools.jb51.net/code/HtmlJsRun，可得到如下测试运行效果：

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript动画特效与技巧汇总》、《JavaScript页面元素操作技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript图形绘制技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

JavaScript 接口原理与用法实例详解
这篇文章主要介绍了JavaScript 接口原理与用法,结合实例形式详细分析了JavaScript 接口原理、优缺点、用法及操作注意事项,需要的朋友可以参考下
2020-05-05
js使用心得分享
这里给大家分享的是本人近期学习与使用javascript之后总结出来的一些经验和心得，虽然目前只有5点，但以后会慢慢更新，希望对大家能有所帮助。
2015-01-01
JavaScript判断FileUpload控件上传文件类型
在CS后台代码中获取FileUpload控件上传文件的类型是比较容易的！那么，能否在客户端通过JavaScript脚本判断FileUpload上传文件类型呢？答案是可以的，下面通过一个小例子为大家展示
2015-09-09
原生js实现电商侧边导航效果
本文主要分享了原生js实现电商侧边导航效果的示例代码以及原理分析。具有很好的参考价值，下面跟着小编一起来看下吧
2017-01-01
javascript和php使用ajax通信传递JSON的实例
今天小编就为大家分享一篇javascript和php使用ajax通信传递JSON的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
网络之美 JavaScript中Get和Set访问器的实现代码
前两天IE9 Beta版发布了，对于从事Web开发的朋友们来说真是个好消息啊，希望将来有一天各个浏览器都能遵循统一的标准。今天要和大家分享的是JavaScript中的Get和Set访问器，和C#中的访问器非常相似。
2010-09-09
js利用Array.splice实现Array的insert/remove
从一个数组中移除一个或多个元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素。
2009-01-01
原生javascript AJAX 三级联动的实现代码
这篇文章主要介绍了原生javascript AJAX 三级联动的实现代码，非常不错代码简单易懂，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-05-05
ECMAScript6轮播图实践知识总结
最近萌生了用ECMAScript6写一个轮播图的想法，以前就知道ECMAScript6，但是一直没有学，现在终于下决心学了，本篇文章会总结在实践中用到的ES6的知识。
2016-08-08
一文带你理解JavaScript中的函数式编程
函数式编程是一种编程规范，也是一种对语言程序（比如JavaScript）本身能力的运用方式。本篇文章将从编程规范来介绍函数式编程的到底是一种什么样的规范，希望对大家有所帮助
2023-02-02