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

本文实例为大家分享了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);

效果图：

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

赞 (0)

相关推荐

  • js实现的文字横向无间断滚动

    我一开始想到的标签是<marquee>,因为它可以实现横向滚动.经理说它的起始位置从最右边出来的,能不能将它改成从中间出来,或者从最左边出来也行.查了相关资料,才知道<marquee>无法指定起始位置.后来在网上找到一段代码,它是用图片来实现的,我将图片改成文字之后,顺利地实现了我所想要的功能.代码如下: #gongao{width:1000px;height:30px;overflow:hidden;line-height:30px;font-size:13px;font-fam

  • 文字不间断滚动(上下左右)实例代码

    向上 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>连续向上滚动</title><style t

  • 基于jQuery的公告无限循环滚动实现代码

    在线演示:http://demo.jb51.net/js/2012/callboard/jQuery代码 复制代码 代码如下: //第二版:Newton改造 (function (win){ var callboarTimer; var callboard = $('#callboard'); var callboardUl = callboard.find('ul'); var callboardLi = callboard.find('li'); var liLen = callboard.

  • 基于jquery的滚动新闻列表

    基于jquery的滚动新闻列表

    呵呵,效果图如下:   ps:gif做的不是很好,大家将就一下吧,呵呵. 下面来看代码: 复制代码 代码如下: <div class="news-container" style="width: 260px; margin: auto;"> <ul> <li style="height:40px"> <!--这里可以换成是动态的新闻--> <a href="NewsRead.aspx

  • 基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)

    兼容各浏览器的文本行高 复制代码 代码如下: (function($){ $.fn.extend({ RollTitle: function(opt,callback){ if(!opt) var opt={}; var _this = this; _this.timer = null; _this.lineH = _this.find("li:first").height(); _this.line=opt.line?parseInt(opt.line,15):parseInt(_t

  • div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox

    div+css+javascript 实现无缝滚动,marquee无缝滚动,无缝滚动,兼容firefox 用marquee实现首尾相连循环滚动效果(仅IE): 复制代码 代码如下: <marquee behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount=&quo

  • 用javascript实现代替marquee的滚动字幕效果代码

    由于marquee标签现在用得是越来越少了,所以滚动效果的做法大多也都改用javascript来实现了之所以抛弃marquee是因为marquee是一个严重影响用户体验的东西,你把数十行内容压缩到几行滚动的确帮助你压缩了排版空间,但你有没有想过用户可能因为想阅读其中一两行的内容而不得不在你这个滚动上等半天?就以经典论坛页面上部"BlogBeta 数字引擎p4 3.0服务器只要6999元/年"广告文字右边的聚合文字滚动为例,你觉得这是一个很好的用户体验么?W3C的专家们难道还不如一群无知

  • JS实用的带停顿的逐行文本循环滚动效果实例

    如下所示: <!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"> <head> <title>JS实用的带停顿的逐行文本循环

  • 浅析js 文字滚动效果

    这种效果在今后的web发展中是不是常用或者是否依然被设计师们所青睐,从技术层面看并不是最重要的,了解它的实现原理,对自身前端技术的提高,会有很大的帮助,世间万物,万变不离其宗,掌握了它的运行规律,你才不会被其花花外表所迷惑,甚至你可以在掌握其规律的前提下,运行相关技术,创造出新的效果来.下面看看它的实现过程: 1.html 复制代码 代码如下: <div class="box" id="marqueebox0"> <ul> <li st

  • jQuery实现公告文字左右滚动的实例代码

    复制代码 代码如下: <!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"><head><meta http-equiv="

随机推荐