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 StringBuilder类实现
Dec 22 Javascript
使用js操作css实现js改变背景图片示例
Mar 10 Javascript
javascript实现避免页面按钮重复提交
Jan 08 Javascript
js实现文字跟随鼠标移动而移动的方法
Feb 28 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 Javascript
Vue自定义指令使用方法详解
Aug 21 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
详解JavaScript 中的批处理和缓存
Nov 19 Javascript
比较node.js和Deno
Apr 27 Javascript
vue2实现provide inject传递响应式
May 21 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
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
php连接Access数据库错误及解决方法
2013/06/20 PHP
PHP Class&amp;Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
jquery移动节点实例
2015/01/14 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
2015/01/28 Javascript
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
盘点javascript 正则表达式中 中括号的【坑】
2016/03/16 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
使用Bootstrap打造特色进度条效果
2017/05/02 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
小程序实现人脸识别功能(百度ai)
2018/12/23 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
Python计算程序运行时间的方法
2014/12/13 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
Python for循环与getitem的关系详解
2020/01/02 Python
Rentalcars.com中国:世界上最大的在线汽车租赁服务
2019/08/22 全球购物
体育教师自荐信范文
2013/12/16 职场文书
学习十八大报告感言
2014/02/04 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
监护人证明
2015/06/19 职场文书
销售会议开幕词
2016/03/04 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang
2022微信温控新功能上线
2022/05/09 数码科技
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server