模板:滚动条

模板文档  

这个文档嵌入自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}}}}
}}

<!-- 当 步骤数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}}}}
}}