置顶公告:【置顶】关于临时开启评论区所有功能的公告(2022.10.22) | 【置顶】关于本站Widget恢复使用的公告
  • 你好~!欢迎来到萌娘百科镜像站!如需查看或编辑,请联系本站管理员注册账号。
  • 本镜像站和其他萌娘百科的镜像站无关,请注意分别。

模板:滾動條

萌娘百科,萬物皆可萌的百科全書!轉載請標註來源頁面的網頁連結,並聲明引自萌娘百科。內容不可商用。
跳至導覽 跳至搜尋
Template-info.svg 模板文檔  [查看] [編輯] [歷史] [刷新]

簡介

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

參數說明

  • 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}}}}
}}
Wynn the Wind Charmer.jpg
Wynn the Wind Charmer.jpg
Eria The Water Charmer.jpg
Eria The Water Charmer.jpg
Hiita the Fire Charmer.jpg
Hiita the Fire Charmer.jpg
Lyna the Light Charmer.jpg
Lyna the Light Charmer.jpg
<!-- 当 步骤数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}}}}
}}
Wynn the Wind Charmer.jpg
Wynn the Wind Charmer.jpg
Eria The Water Charmer.jpg
Eria The Water Charmer.jpg
Hiita the Fire Charmer.jpg
Hiita the Fire Charmer.jpg
Lyna the Light Charmer.jpg
Lyna the Light Charmer.jpg
<!-- 通过在外层嵌套一个容器,把多余的部分隐藏掉就可以实现切换效果 -->
<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>
Wynn the Wind Charmer.jpg
Wynn the Wind Charmer.jpg
Eria The Water Charmer.jpg
Eria The Water Charmer.jpg
Hiita the Fire Charmer.jpg
Hiita the Fire Charmer.jpg
Lyna the Light Charmer.jpg
Lyna the Light Charmer.jpg
<!-- 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>
Wynn the Wind Charmer.jpg
Wynn the Wind Charmer.jpg
Eria The Water Charmer.jpg
Eria The Water Charmer.jpg
Hiita the Fire Charmer.jpg
Hiita the Fire Charmer.jpg
Lyna the Light Charmer.jpg
Lyna the Light Charmer.jpg
{{滚动条}}{{滚动条|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}}}}
}}
Wynn the Wind Charmer.jpg
Wynn the Wind Charmer.jpg
Eria The Water Charmer.jpg
Eria The Water Charmer.jpg
Hiita the Fire Charmer.jpg
Hiita the Fire Charmer.jpg
Lyna the Light Charmer.jpg
Lyna the Light Charmer.jpg