JS實現圖片旋轉動畫效果封裝與使用示例

來源：懂視網責編：小采時間：2020-11-27 22:11:44

JS實現圖片旋轉動畫效果封裝與使用示例

JS實現圖片旋轉動畫效果封裝與使用示例:本文實例講述了JS實現圖片旋轉動畫效果封裝與使用。分享給大家供大家參考，具體如下：核心封裝代碼如下： //圖片動畫封裝 function SearchAnim(opts) { for(var i in SearchAnim.DEFAULTS) { if (opts[i] === undefined)

推薦度：

點擊下載本文 文檔為doc格式

導讀JS實現圖片旋轉動畫效果封裝與使用示例:本文實例講述了JS實現圖片旋轉動畫效果封裝與使用。分享給大家供大家參考，具體如下：核心封裝代碼如下： //圖片動畫封裝 function SearchAnim(opts) { for(var i in SearchAnim.DEFAULTS) { if (opts[i] === undefined)

本文實例講述了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>www.gxlcms.com JS旋轉動畫</title>
</head>
<img src="https://files.jb51.net/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.jb51.net/code/HtmlJsRun，可得到如下測試運行效果：

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript動畫特效與技巧匯總》、《JavaScript頁面元素操作技巧總結》、《JavaScript運動效果與技巧匯總》、《JavaScript圖形繪制技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JS實現圖片旋轉動畫效果封裝與使用示例

推薦度：

點擊下載本文 文檔為doc格式

標簽：圖片旋轉 js

熱門焦點

JS實現圖片旋轉動畫效果封裝與使用示例

JS實現圖片旋轉動畫效果封裝與使用示例

JS實現圖片旋轉動畫效果封裝與使用示例

最新推薦

猜你喜歡

熱門推薦