相思资源网 Design By www.200059.com
在很多场景中，我们需要使用到中奖信息播报，或者一些文本信息循环滚动播报，在结合实际的开发中，然后也百度查询了相关的知识点，现在送上jQuery实现文本滚动。
1：html代码文件
相关使用说明也在页面相关位置标注啦
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>文本滚动</title> <link rel="stylesheet" type="text/css" href="css/style.css" rel="external nofollow" > <script src="/UploadFiles/2021-04-02/jquery-1.9.1.min.js"><script> $(document).ready(function(){ //speed:滚动的速度 数值越大速度越慢。 timer:数据停留时间 数值越大停留时间越久 $('#trade_win').Scroll({ line: 1, speed: 1000, timer: 1500 }); }) </script> <div class="demo"> <h2>横向滚动</h2> <div class="demolist"> <ul class="ul"> <li> <h4>示例1 - 无滚动效果</h4> <div class="demo-cont"> <div class="txt-scroll txt-scroll-default"> <div class="scrollbox"> <div class="txt"> 微信小程序端有关于一篇文章生成一张海报图片，用于用户保存之后分享，实际开发的过程中遇到的一些问题如下 </div> </div> </div> </div> <div class="jsset"> <pre> $('.txt-scroll').txtscroll({ 'speed': 50 }); //说明：文本长度不够无滚动效果 </pre> </div> </li> <li> <h4>示例2 - 默认参数配置</h4> <div class="demo-cont"> <div class="txt-scroll txt-scroll-default"> <div class="scrollbox"> <div class="txt"> 微信小程序端有关于一篇文章生成一张海报图片，用于用户保存之后分享，实际开发的过程中遇到的一些问题如下.微信小程序端有关于一篇文章生成一张海报图片，用于用户保存之后分享，实际开发的过程中遇到的一些问题如下.微信小程序端有关于一篇文章生成一张海报图片，用于用户保存之后分享，实际开发的过程中遇到的一些问题如下 </div> </div> </div> </div> <div class="jsset"> <pre> $('.txt-scroll').txtscroll({ 'speed': 50 }); </pre> </div> </li> <li> <h4>示例2 - 自定义参数配置</h4> <div class="demo-cont"> <div class="txt-scroll txt-scroll-curs"> <div class="scrollbox"> <div class="txt"> 微信小程序端有关于一篇文章生成一张海报图片，用于用户保存之后分享，实际开发的过程中遇到的一些问题如下.微信小程序端有关于一篇文章生成一张海报图片，用于用户保存之后分享，实际开发的过程中遇到的一些问题如下 </div> </div> </div> </div> <div class="jsset"> <pre> $('.txt-scroll').txtscroll({ 'speed': 20 }); </pre> </div> </li> </ul> </div> </div> <script> //默认案例 window.onload = function () { $('.txt-scroll-default').txtscroll({ 'speed': 50 }); }; //自定义参数案例 $('.txt-scroll-curs').txtscroll({ 'speed': 10 }); </script> </body> </html>2：关键的JS 文件
(function($){ $.fn.extend({ Scroll:function(opt,callback){ if(!opt) var opt={}; var _btnUp = $("#"+ opt.up); var _btnDown = $("#"+ opt.down); var timerID; var _this=this.eq(0).find("ul:first"); var lineH=_this.find("li:first").height(), //获取行高 line=opt.line"li").length;//LI的总数 var showCount=parseInt(this.height()/lineH);//显示出来的LI数量 var currentCount=showCount; var scrollUp=function(){ if(!cycle && currentCount>=liCount) return; _btnUp.unbind("click",scrollUp); _this.animate({ marginTop:upHeight },speed,function(){ for(i=1;i<=line;i++){ if(!cycle && currentCount>=liCount) break; currentCount++; _this.find("li:first").appendTo(_this); } _this.css({marginTop:0}); _btnUp.bind("click",scrollUp); }); } var scrollDown=function(){ if(!cycle && currentCount<=showCount) return; _btnDown.unbind("click",scrollDown); for(i=1;i<=line;i++){ if(!cycle && currentCount<=showCount) break; currentCount--; _this.find("li:last").show().prependTo(_this); } _this.css({marginTop:upHeight}); _this.animate({ marginTop:0 },speed,function(){ _btnDown.bind("click",scrollDown); }); } var autoPlay = function(){ if(auto) { if(timer>0) timerID = window.setInterval(scrollUp,timer); } }; var autoStop = function(){ if(timer)window.clearInterval(timerID); }; _this.hover(autoStop,autoPlay).mouseout(); _btnUp.css("cursor","pointer").click( scrollUp ).hover(autoStop,autoPlay); _btnDown.css("cursor","pointer").click( scrollDown ).hover(autoStop,autoPlay); } }) })(jQuery);
总结
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无jQuery实现中奖播报功能（让文本滚动起来） 简单设置数值即可的评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。