淘宝装修特效代码之文字滚动轮播

作者:烟中隐约闪现 | 创建时间: 2023-06-03
文字卡盘轮播特效,现在很多店铺的店招中都有这个特效,我们来实现一下...
淘宝装修特效代码之文字滚动轮播

操作方法

打开文本编辑器,复制以下这段样例代码: <div  class="J_TWidget scroll-news" data-widget-type="Slide" data-widget-config="{'contentCls':'news-items','hasTriggers':false,'effect':'scrolly','easing':'easeOutStrong','interval':3,'duration':0.2}"> <ul class="news-items"> <li> <a target="_blank" href="#"> 明天是星期天,买一送一了。 </a> </li> <li> <a target="_blank" href="#"> 下个星期回家乡了 </a> </li> <li> <a target="_blank" href="#"> 明天哥哥娶新娘子,真高兴。 </a> </li> </ul> </div>

样例代码中有三句话,分别为1.2.3 ,修改成自己想要说的话,然后将要链接的地址“#”修改,不链接就不用改。

现在, 我们要定义滚动文字显示的范围。<div class="J_TWidget"></div>中添加 style="width:300px; heigth:30px;" <ul></ul>中添加style="list-style:none; margin:0; padding:0;  width:300px; height:30px; line-height:30px;" 如下图所示

最终代码如下: <div  class="J_TWidget scroll-news" data-widget-type="Slide" data-widget-config="{'contentCls':'news-items','hasTriggers':false,'effect':'scrolly','easing':'easeOutStrong','interval':3,'duration':0.2}" style="width:300px; height:30px; "> <ul class="news-items" style="list-style:none; margin:0; padding:0;  width:300px; height:30px; line-height:30px;"> <li > <a target="_blank" href="#" > 明天是星期天,买一送一了。 </a> </li> <li> <a target="_blank" href="#"> 下个星期回家乡了 </a> </li> <li> <a target="_blank" href="#"> 明天哥哥娶新娘子,真高兴。 </a> </li> </ul> </div> 打开装修后台,测试代码生效。

温馨提示

可以继续给文字添加样式,比如修改文字颜色,下划线等
可以将特效代码放在任意定位好的<div></div>结构中
点击展开全文

更多推荐