脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → H5实现中奖记录逐行滚动切换效果

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

 更新时间：2017年03月13日 08:58:45   作者：_LinDL  
这篇文章主要为大家详细介绍了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);

效果图：

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

您可能感兴趣的文章:

相关文章

  • 微信小程序实现授权登录

    微信小程序实现授权登录

    这篇文章主要为大家详细介绍了微信小程序实现授权登录，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-05-05
  • JavaScript实现图片放大镜效果

    JavaScript实现图片放大镜效果

    这篇文章主要为大家详细介绍了JavaScript实现图片放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-06-06
  • JS中类的静态方法，静态变量，实例方法，实例变量区别与用法实例分析

    JS中类的静态方法，静态变量，实例方法，实例变量区别与用法实例分析

    这篇文章主要介绍了JS中类的静态方法，静态变量，实例方法，实例变量区别与用法,结合实例形式详细分析了JS中类的静态方法，静态变量，实例方法，实例变量相关功能、使用方法及操作注意事项,需要的朋友可以参考下
    2020-03-03
  • js解决软键盘遮挡输入框的问题分享

    js解决软键盘遮挡输入框的问题分享

    下面小编就为大家推荐一篇js解决软键盘遮挡输入框的问题分享，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • js时钟翻牌效果实现代码分享

    js时钟翻牌效果实现代码分享

    这篇文章主要介绍了javascript时钟翻牌效果的实现，效果非常酷炫，实现步骤也很简单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2015-08-08
  • 可以拖动的div 实现代码

    可以拖动的div 实现代码

    可以拖动的div是一个比较难以做到的效果，特别是在浏览器对于js代码的运行效率还不是足够高的情况下，不过听说firefox对于js的支持正在增加，大概是料到了js在网页浏览的桌面化趋势中所占的重要地位吧。
    2009-06-06
  • 关于JS中的全等和不全等、等于和不等于问题

    关于JS中的全等和不全等、等于和不等于问题

    等号和非等号的同类运算符是全等号和非全等号。这两个运算符所做的与等号和非等号相同，只是它们在检查相等性前，不执行类型转换。接下来通过本文给大家介绍JS中的全等和不全等、等于和不等于，一起看看吧
    2021-09-09
  • javascript-简单的日历实现及Date对象语法介绍(附图)

    javascript-简单的日历实现及Date对象语法介绍(附图)

    主要是对Date对象的使用，首先回忆一下Date对象的参数及方法，代码如下，感兴趣的朋友可以参考下哈
    2013-05-05
  • 详解如何使用JavaScript获取自动消失的联想词

    详解如何使用JavaScript获取自动消失的联想词

    前几天在做数据分析时,我尝试获取某网站上输入搜索词后的联想词,输入搜索词后会弹出一个显示联想词的框,有趣的是,输入框失去焦点后,联想词弹框就自动消失了,这种情况下该怎么办呢,所以本文给大家介绍了如何使用JavaScript获取自动消失的联想词,需要的朋友可以参考下
    2024-06-06
  • js正则表达式中exec用法实例

    js正则表达式中exec用法实例

    这篇文章主要介绍了js正则表达式中exec用法,实例分析了javascript中使用exec执行正则表达式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07

最新评论