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 26 Javascript
JavaScript四种调用模式和this示例介绍
Jan 02 Javascript
JS循环遍历JSON数据的方法
Jul 08 Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 Javascript
js实现鼠标滑过文字链接色彩变化的效果
May 06 Javascript
javascript中使用new与不使用实例化对象的区别
Jun 22 Javascript
简介alert()与console.log()的不同
Aug 26 Javascript
强大Vue.js组件浅析
Sep 12 Javascript
bootstrap IE8 兼容性处理
Mar 22 Javascript
vue中子组件调用兄弟组件方法
Jul 06 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
vue路由传参的基本实现方式小结【三种方式】
Feb 05 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
discuz安全提问算法
2007/06/06 PHP
PHP下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
php object转数组示例
2014/01/15 PHP
php+highchats生成动态统计图
2014/05/21 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
php绘制一条直线的方法
2015/01/24 PHP
PHP判断是否连接上网络的方法
2015/07/01 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
Javascript 匿名函数及其代码模式原理
2010/03/19 Javascript
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
javascript实现回车键提交表单方法总结
2015/01/10 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
深入理解JavaScript 函数
2016/06/06 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
JS在浏览器中解析Base64编码图像
2017/02/09 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
django中使用vue.js的要点总结
2019/07/07 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
js实现无缝轮播图效果
2020/03/09 Javascript
Python中暂存上传图片的方法
2015/02/18 Python
Python检测网站链接是否已存在
2016/04/07 Python
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
Python基于template实现字符串替换
2020/11/27 Python
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
最新奶茶店创业计划书范文
2014/02/08 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
《赶海》教学反思
2014/04/20 职场文书
应届毕业生求职信
2014/05/26 职场文书
团队拓展训练心得体会
2016/01/12 职场文书
党员公开承诺书2016
2016/03/24 职场文书
详解Java实践之抽象工厂模式
2021/06/18 Java/Android