模板:滾動條

模板文檔  

這個文檔嵌入自Template:滾動條/doc。

簡介

本模板主要用於實現簡單的輪播動畫效果。

參數說明

• code：聲明模板所調用的內容。有效值為：容器、組件兩種。
• wd：用來聲明模板所調用的容器或組件的寬度，單位是像素（px），默認值為600。
• ht：用來聲明模板所調用的容器或組件的高度，單位是像素（px），默認值為100。
• border：用來聲明容器的外邊框，默認值為：5px solid #000。
• css：用來聲明容器的樣式。
• loop：用來聲明容器的填充模式。（loop或true時自動重複一組相同排序的文件）
• to：聲明動畫模式，默認值為left，有效值為：left、left-ex、right、right-ex。（其中-ex後綴表示到達底部後將彈回）在容器中聲明的該參數將自動適用於組件。
• offset：用來聲明組件的偏移量，單位是像素（px），默認值是自動設置的。
• time：用來聲明動畫的持續時間，單位是秒（s），默認值為3。在容器中聲明的該參數將自動適用於組件。
• aglin：用來聲明動畫的滾動方向。默認值是left。在容器中聲明的該參數將自動適用於組件。
• timing：用來聲明動畫的播放時間曲線，默認值是勻速，有效值為：常規、勻速、加速、減速、step。在容器中聲明的該參數將自動適用於組件。
  • steps：該參數必須與timing=step聯合使用，用來聲明time時間內所執行步驟數，即每間隔（time/steps）秒完成一幀。默認值是time，也可以考慮與組件數量相同。
• count：用來聲明動畫的播放次數，默認值是infinite，有效值是正整數。在容器中聲明的該參數將自動適用於組件。
• item-？：在以容器模式調用的模板內，以前綴為【item-】參數的方式填入組件，？為自定義的助記符（可以是數字）。
• sysmode：用來聲明內部容器的樣式。
• 匿名參數：在以組件模式調用的模板內，以匿名參數的方式填入要顯示的內容，比如插入一張圖片。

示例

{{滚动条}}<!--空值调用为调用样式表，一个页面只需要执行一次就可以了
-->{{滚动条|code=容器|loop=true
|item1={{滚动条|code=组件|to=left|time=5|666}}
|item2={{滚动条|code=组件|to=left|time=5|777}}
|item3={{滚动条|code=组件|to=left|time=5|888}}
|item4={{滚动条|code=组件|to=left|time=5|999}}
}}

666

666

777

777

888

888

999

999

{{滚动条}}{{滚动条|code=容器|loop=true|wd=1000|ht=250|to=left
|item1={{滚动条|code=组件|time=5|wd=250|ht=250|{{image|显示类型=inline-block|图片=Wynn_the_Wind_Charmer.jpg|宽=250|高=250|阴影色=rgb(33,123,255,0.33)|阴影粗细=18|模糊=5}}}}
|item2={{滚动条|code=组件|time=5|wd=250|ht=250|{{image|显示类型=inline-block|图片=Eria_The_Water_Charmer.jpg|宽=250|高=250|阴影色=rgb(33,123,255,0.33)|阴影粗细=18|模糊=5}}}}
|item3={{滚动条|code=组件|time=5|wd=250|ht=250|{{image|显示类型=inline-block|图片=Hiita_the_Fire_Charmer.jpg|宽=250|高=250|阴影色=rgb(33,123,255,0.33)|阴影粗细=18|模糊=5}}}}
|item4={{滚动条|code=组件|time=5|wd=250|ht=250|{{image|显示类型=inline-block|图片=Lyna_the_Light_Charmer.jpg|宽=250|高=250|阴影色=rgb(33,123,255,0.33)|阴影粗细=18|模糊=5}}}}
}}

<!-- 当 步骤数steps=容器宽度/组件宽度 的时候，就保证每次只推进一个组件的宽度，time/steps决定每个步骤等待时间-->
{{滚动条}}{{滚动条|code=容器|loop=true|wd=1000|ht=250|to=left|timing=step|steps=4
|item1={{滚动条|code=组件|time=5|wd=250|ht=250|{{image|显示类型=inline-block|图片=Wynn_the_Wind_Charmer.jpg|宽=250|高=250|阴影色=rgb(33,123,255,0.33)|阴影粗细=18|模糊=5}}}}
|item2={{滚动条|code=组件|time=5|wd=250|ht=250|{{image|显示类型=inline-block|图片=Eria_The_Water_Charmer.jpg|宽=250|高=250|阴影色=rgb(33,123,255,0.33)|阴影粗细=18|模糊=5}}}}
|item3={{滚动条|code=组件|time=5|wd=250|ht=250|{{image|显示类型=inline-block|图片=Hiita_the_Fire_Charmer.jpg|宽=250|高=250|阴影色=rgb(33,123,255,0.33)|阴影粗细=18|模糊=5}}}}
|item4={{滚动条|code=组件|time=5|wd=250|ht=250|{{image|显示类型=inline-block|图片=Lyna_the_Light_Charmer.jpg|宽=250|高=250|阴影色=rgb(33,123,255,0.33)|阴影粗细=18|模糊=5}}}}
}}

<!-- 通过在外层嵌套一个容器，把多余的部分隐藏掉就可以实现切换效果 -->
<div style="width:250px;height:250px;overflow:hidden;border:5px solid #000;">
{{滚动条}}{{滚动条|code=容器|loop=true|wd=1000|ht=250|to=left|timing=step|steps=4|border=
|item1={{滚动条|code=组件|time=5|wd=250|ht=250|{{image|显示类型=inline-block|图片=Wynn_the_Wind_Charmer.jpg|宽=250|高=250|阴影色=rgb(33,123,255,0.33)|阴影粗细=18|模糊=5}}}}
|item2={{滚动条|code=组件|time=5|wd=250|ht=250|{{image|显示类型=inline-block|图片=Eria_The_Water_Charmer.jpg|宽=250|高=250|阴影色=rgb(33,123,255,0.33)|阴影粗细=18|模糊=5}}}}
|item3={{滚动条|code=组件|time=5|wd=250|ht=250|{{image|显示类型=inline-block|图片=Hiita_the_Fire_Charmer.jpg|宽=250|高=250|阴影色=rgb(33,123,255,0.33)|阴影粗细=18|模糊=5}}}}
|item4={{滚动条|code=组件|time=5|wd=250|ht=250|{{image|显示类型=inline-block|图片=Lyna_the_Light_Charmer.jpg|宽=250|高=250|阴影色=rgb(33,123,255,0.33)|阴影粗细=18|模糊=5}}}}
}}
</div>

<!-- time/steps=6/4=1.5 则意味着每1.5s推进一格 -->
<div style="width:250px;height:250px;overflow:hidden;border:5px solid #000;">
{{滚动条}}{{滚动条|code=容器|loop=true|wd=1000|ht=250|to=left|timing=step|time=6|steps=4|border=
|item1={{滚动条|code=组件|time=5|wd=250|ht=250|{{image|显示类型=inline-block|图片=Wynn_the_Wind_Charmer.jpg|宽=250|高=250|阴影色=rgb(33,123,255,0.33)|阴影粗细=18|模糊=5}}}}
|item2={{滚动条|code=组件|time=5|wd=250|ht=250|{{image|显示类型=inline-block|图片=Eria_The_Water_Charmer.jpg|宽=250|高=250|阴影色=rgb(33,123,255,0.33)|阴影粗细=18|模糊=5}}}}
|item3={{滚动条|code=组件|time=5|wd=250|ht=250|{{image|显示类型=inline-block|图片=Hiita_the_Fire_Charmer.jpg|宽=250|高=250|阴影色=rgb(33,123,255,0.33)|阴影粗细=18|模糊=5}}}}
|item4={{滚动条|code=组件|time=5|wd=250|ht=250|{{image|显示类型=inline-block|图片=Lyna_the_Light_Charmer.jpg|宽=250|高=250|阴影色=rgb(33,123,255,0.33)|阴影粗细=18|模糊=5}}}}
}}
</div>

{{滚动条}}{{滚动条|code=容器|loop=true|wd=1000|ht=500|aglin=rev|to=top-ex|time=4
|item1={{滚动条|code=组件|wd=250|ht=250|{{image|显示类型=inline-block|图片=Wynn_the_Wind_Charmer.jpg|宽=250|高=250|阴影色=rgb(33,123,255,0.33)|阴影粗细=18|模糊=5}}}}
|item2={{滚动条|code=组件|wd=250|ht=250|{{image|显示类型=inline-block|图片=Eria_The_Water_Charmer.jpg|宽=250|高=250|阴影色=rgb(33,123,255,0.33)|阴影粗细=18|模糊=5}}}}
|item3={{滚动条|code=组件|wd=250|ht=250|{{image|显示类型=inline-block|图片=Hiita_the_Fire_Charmer.jpg|宽=250|高=250|阴影色=rgb(33,123,255,0.33)|阴影粗细=18|模糊=5}}}}
|item4={{滚动条|code=组件|wd=250|ht=250|{{image|显示类型=inline-block|图片=Lyna_the_Light_Charmer.jpg|宽=250|高=250|阴影色=rgb(33,123,255,0.33)|阴影粗细=18|模糊=5}}}}
}}