JS实现图片旋转动画效果封装与使用示例-创新互联
本文实例讲述了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 }
分享题目:JS实现图片旋转动画效果封装与使用示例-创新互联
链接分享:http://myzitong.com/article/dphpch.html