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 相关文章推荐
SlideView 图片滑动(扩展/收缩)展示效果
Aug 01 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
js弹出窗口之弹出层的小例子
Jun 17 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
Sep 02 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 Javascript
基于jquery实现省市区三级联动效果
Dec 25 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
Aug 21 Javascript
1秒50万字!js实现关键词匹配
Aug 01 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
Mar 09 Javascript
vue-router实现tab标签页(单页面)详解
Oct 17 Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 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
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
php微信开发之关注事件
2018/06/14 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
JavaScript学习点滴 call、apply的区别
2010/10/22 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
css如何让浮动元素水平居中
2015/08/07 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
Vue底层实现原理总结
2018/02/17 Javascript
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
微信小程序Echarts覆盖正常组件问题解决
2019/07/13 Javascript
javascript中的闭包概念与用法实践分析
2019/07/26 Javascript
初步讲解Python中的元组概念
2015/05/21 Python
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
python pyheatmap包绘制热力图
2018/11/09 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
Python容器类型公共方法总结
2020/08/19 Python
Python join()函数原理及使用方法
2020/11/14 Python
详解Selenium 元素定位和WebDriver常用方法
2020/12/04 Python
HTML5 视频播放(video),JavaScript控制视频的实例代码
2018/10/08 HTML / CSS
描述内存分配方式以及它们的区别
2016/10/15 面试题
经理任命书模板
2014/06/06 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
钢铁是怎样炼成的读书笔记
2015/06/29 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
MySQL sql_mode的使用详解
2021/05/08 MySQL
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS
mysql事务隔离级别详情
2021/10/24 MySQL
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android
数据设计之权限的实现
2022/08/05 MySQL