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}} }}
{{滚动条}}{{滚动条|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}}}} }}