2023年政策修订增补工作正在进行中,欢迎参与!
  • Moegirl.ICU:萌娘百科流亡社群 581077156(QQ),欢迎对萌娘百科运营感到失望的编辑者加入
  • Moegirl.ICU:账号认领正在试运行,有意者请参照账号认领流程

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}}}}
}}
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