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实现中奖记录逐行滚动切换效果

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

Javascript 相关文章推荐
jscript之Read an Excel Spreadsheet
Jun 13 Javascript
js 颜色选择器(兼容firefox)
Mar 05 Javascript
JS 判断undefined的实现代码
Nov 26 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
Nov 11 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
Jun 21 Javascript
jquery隐藏标签和显示标签的实例
Nov 11 Javascript
jquery通过ajax加载一段文本内容的方法
Jan 15 Javascript
jQuery添加和删除输入文本框标签代码
May 20 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
vue filters的使用详解
Jun 11 Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 Javascript
js函数和this用法实例分析
Mar 13 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
You might like
php中经典方法实现判断多维数组是否为空
2011/10/23 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
PHP基于yii框架实现生成ICO图标
2015/11/13 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
js计数器代码
2006/11/04 Javascript
IE php关于强制下载文件的代码
2008/08/23 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
2014/10/20 Javascript
jQuery 处理页面的事件详解
2015/01/20 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
javascript实现在线客服效果
2015/07/15 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
JavaScript基于面向对象实现的猜拳游戏
2018/01/03 Javascript
微信、QQ、微博、Safari中使用js唤起App
2018/01/24 Javascript
jQuery实现参数自定义的文字跑马灯效果
2018/08/15 jQuery
Vue代码整洁之去重方法整理
2019/08/06 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
Angular利用HTTP POST下载流文件的步骤记录
2020/07/26 Javascript
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
用python 制作图片转pdf工具
2015/01/30 Python
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
Python 实现链表实例代码
2017/04/07 Python
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
Python中property函数用法实例分析
2018/06/04 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
对pytorch的函数中的group参数的作用介绍
2020/02/18 Python
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
使用索引(Index)有哪些需要考虑的因素
2016/10/19 面试题
《只有一个地球》教学反思
2014/02/14 职场文书
团代会主持词
2014/04/02 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
2015年后勤工作总结范文
2015/04/08 职场文书
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技