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 版元素拖拽原型代码
Apr 25 Javascript
通过JS获取用户本地图片路径并显示的代码
Feb 16 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
Nov 02 Javascript
jQuery判断指定id的对象是否存在的方法
May 22 Javascript
jQuery实现下拉框选择图片功能实例
Aug 08 Javascript
JSON简介以及用法汇总
Feb 21 Javascript
jQuery获取Table某列的值(推荐)
Mar 03 Javascript
vue 虚拟dom的patch源码分析
Mar 01 Javascript
react以create-react-app为基础创建项目
Mar 14 Javascript
vue结合Echarts实现点击高亮效果的示例
Mar 17 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
从零搭一个自用的前端脚手架的方法步骤
Sep 23 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 session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
csdn 批量接受好友邀请
2009/02/19 Javascript
JavaScript 一道字符串分解的题目
2011/08/03 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
将鼠标焦点定位到文本框最后(代码分享)
2017/01/11 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29
2020/10/29 DOTA
Python中返回字典键的值的values()方法使用
2015/05/22 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
python自带tkinter库实现棋盘覆盖图形界面
2019/07/17 Python
python 利用pyttsx3文字转语音过程详解
2019/09/25 Python
详解Anaconda 的安装教程
2020/09/23 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
英语系毕业生自荐信
2013/10/31 职场文书
中文专业毕业生自荐书范文
2014/01/04 职场文书
教师节慰问信
2015/02/15 职场文书
推销搭讪开场白
2015/05/28 职场文书
python数据分析之用sklearn预测糖尿病
2021/04/22 Python
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL
nginx搭建NFS网络文件系统
2022/04/14 Servers