置顶公告:【置顶】关于临时开启评论区所有功能的公告(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