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 相关文章推荐
JS中Iframe之间传值的方法
Mar 11 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 Javascript
Javascript获取当前时间函数和时间操作小结
Oct 01 Javascript
详细讲解JavaScript中的this绑定
Oct 10 Javascript
vue使用监听实现全选反选功能
Jul 06 Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
Sep 11 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 Javascript
解决layui的table插件无法多层级获取json数据的问题
Sep 19 Javascript
解决Vue动态加载本地图片问题
Oct 09 Javascript
浏览器JavaScript调试功能无法使用解决方案
Sep 18 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
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
PHP XML操作的各种方法解析(比较详细)
2010/06/17 PHP
PHP获取网址的顶级域名函数代码
2012/09/24 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
2010/03/17 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
2010/03/23 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
js密码强度检测
2016/01/07 Javascript
javascript中去除数组重复元素的实现方法【实例】
2016/04/12 Javascript
老生常谈js-react组件生命周期
2017/05/02 Javascript
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
vue实现给div绑定keyup的enter事件
2020/07/31 Javascript
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
Python中函数参数匹配模型详解
2019/06/09 Python
关于python字符串方法分类详解
2019/08/20 Python
Html5元素及基本语法详解
2016/08/02 HTML / CSS
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
个人作风剖析材料
2014/02/02 职场文书
幼儿园大班评语大全
2014/04/17 职场文书
环保建议书400字
2014/05/14 职场文书
2014年卫生工作总结
2014/11/27 职场文书
期中考试复习计划
2015/01/19 职场文书
革命电影观后感
2015/06/18 职场文书
小学英语课教学反思
2016/02/15 职场文书
技术转让协议书
2016/03/19 职场文书
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP
python解析json数据
2022/04/29 Python