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 相关文章推荐
JavaScript DOM学习第八章 表单错误提示
Feb 19 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
Javascript中的this绑定介绍
Sep 22 Javascript
javascript验证只能输入数字和一个小数点示例
Oct 21 Javascript
jQuery中append()方法用法实例
Jan 08 Javascript
Yii2使用Bootbox插件实现自定义弹窗
Apr 02 Javascript
jQuery地图map悬停显示省市代码分享
Aug 20 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
JS实现的点击按钮图片上下滚动效果示例
Jan 28 Javascript
vue路由中前进后退的一些事儿
May 18 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
Sep 18 Javascript
jQuery HTML css()方法与css类实例详解
May 20 jQuery
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
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
PHP自定义错误用法示例
2016/09/28 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
javascript removeChild 使用注意事项
2009/04/11 Javascript
javascript中length属性的探索
2011/07/31 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
jQuery中$(function() {});问题详解
2015/08/10 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python迭代器的使用方法实例
2013/11/21 Python
python动态加载变量示例分享
2014/02/17 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
解决Python获取字典dict中不存在的值时出错问题
2018/10/17 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
python中调试或排错的五种方法示例
2019/09/12 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
error和exception有什么区别
2012/10/02 面试题
员工廉洁自律承诺书
2014/05/26 职场文书
实习护士自荐信
2014/06/21 职场文书
入党政审材料范文
2014/12/24 职场文书
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python
总结Pyinstaller打包的高级用法
2021/06/28 Python
Python集合的基础操作
2021/11/01 Python
vue elementUI表格控制对应列
2022/04/13 Vue.js