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


Posted in Javascript onJuly 09, 2018

本文实例讲述了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>3water.com 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.3water.com/code/HtmlJsRun,可得到如下测试运行效果:

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

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

Javascript 相关文章推荐
javascript 三种编解码方式
Feb 01 Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
Apr 01 Javascript
javascript中的作用域scope介绍
Dec 28 Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 Javascript
node.js中的fs.readSync方法使用说明
Dec 17 Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
vue.js实现条件渲染的实例代码
Jun 22 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
Angular X中使用ngrx的方法详解(附源码)
Jul 10 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
Nov 28 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
JavaScript的Object.defineProperty详解
Jul 09 #Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
Jul 08 #Javascript
mac上配置Android环境变量的方法
Jul 08 #Javascript
vue.js使用watch监听路由变化的方法
Jul 08 #Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 #Javascript
jQuery插件实现弹性运动完整示例
Jul 07 #jQuery
vue.js使用v-pre与v-html输出HTML操作示例
Jul 07 #Javascript
You might like
thinkphp控制器调度使用示例
2014/02/24 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
javascript 建设银行登陆键盘
2008/06/10 Javascript
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
2009/09/19 Javascript
JS继承--原型链继承和类式继承
2013/04/08 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
2016/05/27 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
JavaScript类型相关的常用操作总结
2019/02/14 Javascript
小程序云开发之用户注册登录
2019/05/18 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
用yum安装MySQLdb模块的步骤方法
2016/12/15 Python
python中reader的next用法
2018/07/24 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
Python实现把多维数组展开成DataFrame
2019/11/30 Python
PyCharm 无法 import pandas 程序卡住的解决方式
2020/03/09 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
美国儿童珠宝在线零售商:Loveivy
2019/05/22 全球购物
英国最受信任的在线眼镜商之一:Fashion Eyewear
2019/10/31 全球购物
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
中职生自荐信
2013/10/13 职场文书
遗体告别仪式主持词
2014/03/20 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
给客户的感谢信
2015/01/21 职场文书
邀请函范文
2015/02/02 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
介绍信应该怎么开?
2019/04/03 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python
MySQL RC事务隔离的实现
2022/03/31 MySQL
python运行脚本文件的三种方法实例
2022/06/25 Python