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之动画ajax事件(实例讲解)
Jul 18 jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
jQuery实现滑动开关效果
Aug 02 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 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&amp;mysql(三)
2006/10/09 PHP
PHP新手上路(十三)
2006/10/09 PHP
PHP仿博客园 个人博客(1) 数据库与界面设计
2013/07/05 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
PHP中绘制图像的一些函数总结
2014/11/19 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
PHP命名空间(namespace)原理与用法详解
2019/12/11 PHP
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
javascript Array.remove() 数组删除
2009/08/06 Javascript
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
isArray()函数(JavaScript中对象类型判断的几种方法)
2009/11/26 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
2015/06/22 Javascript
JS基础随笔(菜鸟必看篇)
2016/07/13 Javascript
JS关闭窗口时产生的事件及用法示例
2016/08/20 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
python中Switch/Case实现的示例代码
2017/11/09 Python
python实现名片管理系统项目
2019/04/26 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
商务专员岗位职责
2013/11/23 职场文书
大二学期个人自我评价
2014/01/13 职场文书
应届中专生自荐书范文
2014/02/13 职场文书
求职简历自荐信
2014/06/18 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书
工会工作个人总结
2015/03/03 职场文书
护士自荐信范文
2015/03/25 职场文书
因身体原因离职的辞职信范文
2015/05/12 职场文书