H5实现中奖记录逐行滚动切换效果_网络技术_宿州市腾雀网络科技有限公司

H5实现中奖记录逐行滚动切换效果

发布时间 - 2026-01-11 00:08:09 点击率：次

本文实例为大家分享了H5逐行滚动切换效果的具体代码，供大家参考，具体内容如下

前端页面需先引入jquery

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>中奖记录跑马灯特效</title>
  <script src="../js/jquery-2.2.0.min.js"></script>
  <script src="../js/recordRoll.js"></script>
  <style>
    .box{
      width: 18rem;
      height: 15rem;
      margin: auto;
      background-color: cadetblue;
    }
    .record_title{
      text-align: center;
      width: 100%;
      height: 2rem;
      margin-top: 0.2rem;
      z-index: 2;
      background-color: cadetblue;
      vertical-align: middle;
    }
    .record_list{
      height: 11rem;
      overflow: hidden;
      background-color: cadetblue;
      text-align: left;
      margin-left: 1rem;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="record_title">
    <h1>中奖记录</h1>
    </div>
    <div class="record_list">
      <p>恭喜Ivy抽中10元话费</p>
      <p>恭喜LinDL抽中100元京东E卡</p>
      <p>恭喜Mary抽中40元电影票优惠券</p>
      <p>恭喜Ivy抽中30元话费</p>
      <p>恭喜金坎抽中50元话费</p>
      <p>恭喜Ivy抽中80元话费</p>
      <p>恭喜Ivy抽中200元话费</p>
      <p>恭喜慧林抽中5000元话费</p>
      <p>恭喜张敏抽中iPhone7</p>
      <p>恭喜Ivy抽中10元话费</p>
    </div>
  </div>
</body>
<script>
  $(document.body).ready(function(){
    $(".record_list").RollTitle({line:1,speed:800,timespan:1});
  });
</script>
</html>

利用定时器实现中奖记录逐行展示
recordRoll.js

/**
 * Created by lin on 2017/3/12.
 */
(function($){
  $.fn.extend({
    RollTitle: function(opt){
      if(!opt) var opt={};
      var _this = this;
      _this.timer = null;
      _this.lineH = _this.find("p:first").height();
      _this.line=opt.line?parseInt(opt.line,15):parseInt(_this.height()/_this.lineH,10);
      _this.speed=opt.speed,
      _this.timespan=opt.timespan;
      if(_this.line==0) this.line=1;

      _this.scrollUp=function(){
        _this.animate({
          marginTop:0
        },_this.speed,function(){
          for(i=1;i<=_this.line;i++){
            _this.find("p:first").appendTo(_this);
          }
          _this.css({marginTop:0});
        });
      }
      _this.hover(function(){
        clearInterval(_this.timer);
      },function(){
        _this.timer=setInterval(function(){_this.scrollUp();},_this.timespan);
      }).mouseout();
    }
  })
})(jQuery);

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# H5记录逐行滚动切换 # js逐行滚动 # H5逐行滚动 # JS实用的带停顿的逐行文本循环滚动效果实例 # js实现的文字横向无间断滚动 # 浅析js 文字滚动效果 # 基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区) # 文字不间断滚动(上下左右)实例代码 # jQuery实现公告文字左右滚动的实例代码 # 用javascript实现代替marquee的滚动字幕效果代码 # div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox # 基于jQuery的公告无限循环滚动实现代码 # 基于jquery的滚动新闻列表 # 话费 # 大家分享 # 具体内容 # 大家多多 # 跑马灯 # 京东 # margin # color # background # auto # width # box # style # height # rem # cadetblue # vertical # index # record_list # middle

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：workerman定时器使用（附示例代码）

下一篇：在阿里巴巴个人建站平台上，如何优化网站SEO以提高搜索排名？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：workerman定时器使用（附示例代码）

下一篇：在阿里巴巴个人建站平台上，如何优化网站SEO以提高搜索排名？