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 相关文章推荐
jQuery实现简单下拉导航效果
Sep 07 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
React根据宽度自适应高度的示例代码
Oct 11 Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 Javascript
详解easyui 切换主题皮肤
Apr 04 Javascript
如何自动化部署项目?折腾服务器之旅~
Apr 16 Javascript
JavaScript如何实现图片处理与合成
May 29 Javascript
浅谈 JavaScript 沙箱Sandbox
Nov 02 Javascript
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
thinkPHP3.2.3结合Laypage实现的分页功能示例
2018/05/28 PHP
Yii Framework框架开发微信公众平台示例
2020/04/26 PHP
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
javascript面向对象之Javascript 继承
2010/05/04 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
2017/10/27 jQuery
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
vue 微信扫码登录(自定义样式)
2020/01/06 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
[01:07:15]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第二场 1月25日
2021/03/11 DOTA
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
python使用PythonMagick将jpg图片转换成ico图片的方法
2015/03/26 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
Python实现合并同一个文件夹下所有txt文件的方法示例
2018/04/26 Python
python保存文件方法小结
2018/07/27 Python
python实现AES加密解密
2019/03/28 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
python怎么提高计算速度
2020/06/11 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
实习销售业务员自我鉴定
2013/09/21 职场文书
中专毕业自我鉴定
2013/10/16 职场文书
大学生职业生涯规划书前言
2014/01/09 职场文书
运动会广播稿200米
2014/01/27 职场文书
跟单业务员岗位职责
2014/03/08 职场文书
《三顾茅庐》教学反思
2014/04/10 职场文书
办公室文员工作自我鉴定
2014/09/19 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书