编程 Javascript

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

Posted in Javascript onMarch 13, 2017

本文实例为大家分享了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实现中奖记录逐行滚动切换效果

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

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

- Author -

_LinDL

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript的parseInt 进制问题

May 07 Javascript

Javascript 继承机制实例

Aug 12 Javascript

详解AngularJS中的http拦截

Feb 09 Javascript

jQuery实现按钮点击遮罩加载及处理完后恢复的效果

Jun 07 Javascript

javascript之Boolean类型对象

Jun 07 Javascript

javascript鼠标跟随运动3种效果（眼球效果，苹果菜单，方向跟随）

Oct 27 Javascript

微信公众平台开发教程（四）实例入门：机器人回复(附源码)

Dec 02 Javascript

js实现带缓动动画的导航栏效果

Jan 16 Javascript

Express URL跳转（重定向）的实现方法

Apr 07 Javascript

详解vue-router 2.0 常用基础知识点之导航钩子

May 10 Javascript

微信小程序页面生命周期详解

Jan 31 Javascript

Vue下拉框回显并默认选中随机问题

Sep 06 Javascript

jQuery实现页面倒计时并刷新效果

Mar 13 #Javascript

JS实现的简单拖拽功能示例

Mar 13 #Javascript

jQuery中layer分页器的使用

Mar 13 #Javascript

如何理解jQuery中的ajaxSubmit方法

Mar 13 #Javascript

Node.js调试技术总结分享

Mar 12 #Javascript

JavaScript中双符号的运算详解

Mar 12 #Javascript

利用Node.js对文件进行重命名

Mar 12 #Javascript