在很多场景中,我们需要使用到中奖信息播报,或者一些文本信息循环滚动播报,在结合实际的开发中,然后也百度查询了相关的知识点,现在送上jQuery实现文本滚动。
1:html代码文件
相关使用说明也在页面相关位置标注啦
文本滚动.new_trade .new_trade_body .yl{margin-top:4px}
.fix_tradebottom{clear:both;background:#222; position:fixed;width:100%;left:0;z-index:12;bottom:0}
.trade_win{height:26px;line-height:26px;width:54%;text-align:center;color:#646464;font-size:12px;border-top: 1px solid #c8c8c8;border-bottom: 1px solid #c8c8c8;background:#f3f3f3;}
#trade_win{height:26px;line-height:26px;width:100%;overflow:hidden;}
.trade_win ul{height:26px;line-height:26px}
.trade_win li{width:100%;display:block;}
.trade_win li span{ no-repeat;background-position: 0px 3px;background-size:13px 10px; padding-left:18px;}
纵向滚动
- 恭喜道1中奖 825.00元
- 恭喜道2中奖 825.00元
- 恭喜道3中奖 825.00元
- 恭喜道4中奖 825.00元
- 恭喜道5中奖 825.00元
- 恭喜道6中奖 825.00元
- 恭喜道7中奖 825.00元
$(document).ready(function(){
//speed:滚动的速度 数值越大速度越慢。 timer:数据停留时间 数值越大停留时间越久
$('#trade_win').Scroll({ line: 1, speed: 1000, timer: 1500 });
})
横向滚动
示例1 - 无滚动效果
微信小程序端有关于一篇文章生成一张海报图片,用于用户保存之后分享,实际开发的过程中遇到的一些问题如下
$('.txt-scroll').txtscroll({ 'speed': 50 });
//说明:文本长度不够无滚动效果
示例2 - 默认参数配置
微信小程序端有关于一篇文章生成一张海报图片,用于用户保存之后分享,实际开发的过程中遇到的一些问题如下.微信小程序端有关于一篇文章生成一张海报图片,用于用户保存之后分享,实际开发的过程中遇到的一些问题如下.微信小程序端有关于一篇文章生成一张海报图片,用于用户保存之后分享,实际开发的过程中遇到的一些问题如下
$('.txt-scroll').txtscroll({ 'speed': 50 });
示例2 - 自定义参数配置
微信小程序端有关于一篇文章生成一张海报图片,用于用户保存之后分享,实际开发的过程中遇到的一些问题如下.微信小程序端有关于一篇文章生成一张海报图片,用于用户保存之后分享,实际开发的过程中遇到的一些问题如下
$('.txt-scroll').txtscroll({ 'speed': 20 });
//默认案例
window.onload = function () {
$('.txt-scroll-default').txtscroll({
'speed': 50
});
};
//自定义参数案例
$('.txt-scroll-curs').txtscroll({
'speed': 10
});