大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
本文实例讲述了JS实现图片旋转动画效果封装与使用。分享给大家供大家参考,具体如下:
我们提供的服务有:成都网站设计、成都网站制作、微信公众号开发、网站优化、网站认证、天宁ssl等。为1000多家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的天宁网站制作公司
核心封装代码如下:
//图片动画封装 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, });
完整示例代码:
www.jb51.net JS旋转动画
使用本站HTML/CSS/JS在线运行测试工具:http://tools.jb51.net/code/HtmlJsRun,可得到如下测试运行效果:
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript动画特效与技巧汇总》、《JavaScript页面元素操作技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript图形绘制技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。