主頁
WIX服務介紹
WIX進階服務方案
WIX教學
活動及課程
Blog
WIXHK討論區
聯絡我們
More
請問WIX有類似進度條的功能嗎?請問是在"嵌入"html設定嗎?有影片解說嗎?
1) 有的 但必需使用開發模式,故此必需使用語法。Wix只提供了一點點Code Snippet:
首先開啟開發模式>新增>互動式>進度條 請於Page Code Tab加上以下的代碼:
// Set the target value as 50 $w('#myProgressBar').targetValue = 50; // Set the progress as 20 $w('#myProgressBar').value = 20;
第一個數值是進度條的最高值,第二個數值是進度條顯示的數值。 請把以上('#myProgressBar')內的名稱,改為你的物件ID。
2) 或者,你也可以使用嵌入的方式: 新增>嵌入>嵌入小工具>輸入程式碼 以下是我們嵌入的樣式,這個是animated:
另一個是no animation:
你也可以參考教學這裡,只需要嵌入一點點程式碼便可以了
如有需要,我們可提供以上嵌入的程式碼,但其他<style>的部分則需要自己處理了。
感謝您
請問可以提供程式碼嗎?我都試試看,謝謝
@Angela Fu 嵌入animated進度條:
<section> <div class="animation-bar-1"> <div data-animation></div> <span style="width:60%"></span> </div> </section> <style> .animation-bar-1 { position: relative; display: block; padding: 5px; font-size: 16px; line-height: 16px; border-radius: 30px; background: rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08); } .animation-bar-1 span { position: relative; display: inline-block; vertical-align: middle; height: 20px; border-radius: 10px 0 0 10px; overflow: hidden; background-color: #f56982; background-size: 100%; background-image: linear-gradient(to bottom, #f2395a, #b90c2b); animation: progress-anim-1 2s linear forwards; // bar speed } .animation-bar-1 span:after { //the Red bar position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ""; background-size: 100%; background-image: linear-gradient(45deg, #ffffff 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #ffffff 50%, #ffffff 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0)); background-size: 30px 30px; opacity: 0.3; animation: progress-anim-1-after linear forwards; } @keyframes progress-anim-1 { 0% { width: 0%; // bar starting point } 50% { width: 80%; // bar moves to the point } 100% { width: 80%; // bar stopping point } } </style>
嵌入No animation進度條:
<section> <div class="animation-bar-1"> <span style="width:60%"></span> </div> </section> <style> .animation-bar-1 { position: relative; display: block; padding: 5px; font-size: 16px; line-height: 16px; border-radius: 30px; background: rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08); } .animation-bar-1 span { position: relative; display: inline-block; vertical-align: middle; height: 20px; border-radius: 10px 0 0 10px; overflow: hidden; background-color: #f56982; background-size: 100%; background-image: linear-gradient(to bottom, #006dc7, #459fed); //the bar color } }
#ProgressBar #進度條
1) 有的 但必需使用開發模式,故此必需使用語法。Wix只提供了一點點Code Snippet:
首先開啟開發模式>新增>互動式>進度條 請於Page Code Tab加上以下的代碼:
// Set the target value as 50 $w('#myProgressBar').targetValue = 50; // Set the progress as 20 $w('#myProgressBar').value = 20;
第一個數值是進度條的最高值,第二個數值是進度條顯示的數值。 請把以上('#myProgressBar')內的名稱,改為你的物件ID。
2) 或者,你也可以使用嵌入的方式: 新增>嵌入>嵌入小工具>輸入程式碼 以下是我們嵌入的樣式,這個是animated:
另一個是no animation:
你也可以參考教學這裡,只需要嵌入一點點程式碼便可以了
如有需要,我們可提供以上嵌入的程式碼,但其他<style>的部分則需要自己處理了。