中奖人js滚动效果_jQuery实现中奖播报功能（让文本滚动起来） 简单设置数值即可...

在很多场景中，我们需要使用到中奖信息播报，或者一些文本信息循环滚动播报，在结合实际的开发中，然后也百度查询了相关的知识点，现在送上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

});