jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可


Posted in jQuery onMarch 20, 2020

在很多场景中,我们需要使用到中奖信息播报,或者一些文本信息循环滚动播报,在结合实际的开发中,然后也百度查询了相关的知识点,现在送上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="jquery-1.9.1.min.js"></script>
<script src="jquery.scroll.js"></script> 
<script src="txtscroll.js"></script> 
<style>
.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;}
</style>
</head>
<h2 style="margin-left: 426px;">纵向滚动</h2>
<div class="trade_win" style="margin-left: 426px;">
 <div id="trade_win">
 <ul>
 <li><span>恭喜道1中奖 825.00元</span></li>
 <li><span>恭喜道2中奖 825.00元</span></li>
 <li><span>恭喜道3中奖 825.00元</span></li>
 <li><span>恭喜道4中奖 825.00元</span></li>
 <li><span>恭喜道5中奖 825.00元</span></li>
 <li><span>恭喜道6中奖 825.00元</span></li>
 <li><span>恭喜道7中奖 825.00元</span></li>
 </ul>
 </div>
 </div>
<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?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滚动的行数,默认为一屏,即父容器高度
   auto=opt.auto!=null?opt.auto:true,//是否自动滚动,默认自动
   cycle=opt.cycle!=null?opt.cycle:true,//是否循环滚动,默认循环
   speed=opt.speed!=null?parseInt(opt.speed,10):500; //卷动速度,数值越大,速度越慢(毫秒)
   timer=opt.timer!=null?opt.timer:3000; //滚动的时间间隔(毫秒)
  if(line==0) line=1;
  var upHeight=0-line*lineH;
  var liCount=_this.find("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);

jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可

总结

到此这篇关于jQuery实现中奖播报(让文本滚动起来) 简单设置数值即可的文章就介绍到这了,更多相关jquery 中奖播报 滚动内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

jQuery 相关文章推荐
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
jQuery轮播图功能制作方法详解
Dec 03 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 #jQuery
jQuery实现颜色打字机的完整代码
Mar 19 #jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 #jQuery
jquery实现烟花效果(面向对象)
Mar 10 #jQuery
jquery实现垂直手风琴菜单
Mar 04 #jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 #jQuery
jquery实现直播视频弹幕效果
Feb 25 #jQuery
You might like
php HtmlReplace输入过滤安全函数
2010/07/03 PHP
php可生成缩略图的文件上传类实例
2014/12/17 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
第五篇Bootstrap 排版
2016/06/21 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
2016/11/03 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
对Python字符串中的换行符和制表符介绍
2018/05/03 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
Python变量访问权限控制详解
2019/06/29 Python
Python如何计算语句执行时间
2019/11/22 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
利用Tensorflow的队列多线程读取数据方式
2020/02/05 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
通用C#笔试题附答案
2016/11/26 面试题
个人求职简历的自我评价范文
2013/10/09 职场文书
初中女生自我鉴定
2013/12/19 职场文书
销售主管岗位职责
2014/02/08 职场文书
工程材料采购方案
2014/05/18 职场文书
幼儿园安全生产月活动总结
2014/07/05 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
党内外群众意见范文
2015/06/02 职场文书
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL
《最终幻想14》6.01版本4月5日推出 追加新任务新道具
2022/04/03 其他游戏