脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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);

效果图：

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

您可能感兴趣的文章:

相关文章

  • JavaScript进阶练习及简单实例分析

    JavaScript进阶练习及简单实例分析

    下面小编就为大家带来一篇JavaScript进阶练习及简单实例分析。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • javascript import css实例代码

    javascript import css实例代码

    差点被FF下的insertRule给带晕了. sheet.insertRule("@import url('aa.css');",sheet.cssRules.length);
    2008-07-07
  • javascript中获取元素标签中间的内容的实现方法

    javascript中获取元素标签中间的内容的实现方法

    下面小编就为大家带来一篇javascript中获取元素标签中间的内容的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 关于layui的按钮禁用与恢复方式

    关于layui的按钮禁用与恢复方式

    这篇文章主要介绍了关于layui的按钮禁用与恢复方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-06-06
  • JS中fetch()用法实例详解

    JS中fetch()用法实例详解

    在JS中使用fetch更加高效地进行网络请求,下面这篇文章主要给大家介绍了关于JS中fetch()用法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • 基于JavaScript实现购物车功能

    基于JavaScript实现购物车功能

    这篇文章主要为大家详细介绍了基于JavaScript实现购物车功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 使用eslint和githooks统一前端风格的技巧

    使用eslint和githooks统一前端风格的技巧

    这篇文章主要介绍了使用eslint和githooks统一前端风格,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-07-07
  • 代码块高亮可复制显示js插件highlight.js+clipboard.js整合

    代码块高亮可复制显示js插件highlight.js+clipboard.js整合

    最近有个需求是将jsp页面上的某一段代码块格式化成类似CSDN的代码块的样式，而且很多平台都使用了这样的功能，下面就为大家简单分享一下
    2021-02-02
  • JS运动特效之链式运动分析

    JS运动特效之链式运动分析

    这篇文章主要介绍了JS运动特效之链式运动,结合实例形式分析了javascript链式运动的原理与具体实现技巧,需要的朋友可以参考下
    2018-01-01
  • 微信小程序计算器实现案例详解

    微信小程序计算器实现案例详解

    最近继续玩一些微信小程序的api来做例子,感觉自己可能创造力不很足,只能模仿着别人的例子来做一个自己的计算器了,下面这篇文章主要给大家介绍了关于微信小程序计算器实现案例的相关资料,需要的朋友可以参考下
    2023-06-06

最新评论