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