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 相关文章推荐
OfflineSave离线保存代码再次发布使用说明
May 23 Javascript
google 搜索框添加关键字实现代码
Apr 24 Javascript
jquery实现简单的遮罩层
Jan 08 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
Mar 25 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 Javascript
AngularJS  ng-table插件设置排序
Sep 21 Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 Javascript
使用puppeteer爬取网站并抓出404无效链接
Dec 20 Javascript
Vue中的验证登录状态的实现方法
Mar 09 Javascript
使用微信SDK自定义分享的方法
Jul 03 Javascript
vue中的 $slot 获取插槽的节点实例
Nov 12 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
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
PHP处理bmp格式图片的方法分析
2017/07/04 PHP
PHP实现从上往下打印二叉树的方法
2018/01/18 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
JQuery实现动态表格点击按钮表格增加一行
2014/08/24 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
微信小程序 自定义对话框实例详解
2017/01/20 Javascript
webpack3之loader全解析
2017/10/26 Javascript
ES10 特性的完整指南小结
2019/03/04 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
2020/03/26 Javascript
VueQuillEditor富文本上传图片(非base64)
2020/06/03 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
详解Python with/as使用说明
2018/12/13 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
python 决策树算法的实现
2020/10/09 Python
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
中学生爱国演讲稿
2013/12/31 职场文书
业务副厂长岗位职责
2014/01/03 职场文书
铁路工务反思材料
2014/02/07 职场文书
体育教学随笔感言
2014/02/24 职场文书
新教师岗前培训方案
2014/06/05 职场文书
团队激励口号
2014/06/06 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
入党个人总结范文
2015/03/02 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技