模板:滾動條
跳至導覽
跳至搜尋
簡介
本模板主要用於實現簡單的輪播動畫效果。
參數說明
- 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}}
}}
{{滚动条}}{{滚动条|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}}}}
}}