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

前端之家收集整理的这篇文章主要介绍了H5实现中奖记录逐行滚动切换效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例为大家分享了H5逐行滚动切换效果的具体代码,供大家参考,具体内容如下

前端页面需先引入jquery

<Meta charset="UTF-8"> 中奖记录跑马灯特效
Box">
中奖记录
恭喜Ivy抽中10元话费

恭喜LinDL抽中100元京东E卡

恭喜Mary抽中40元电影票优惠券

恭喜Ivy抽中30元话费

恭喜金坎抽中50元话费

恭喜Ivy抽中80元话费

恭喜Ivy抽中200元话费

恭喜慧林抽中5000元话费

恭喜张敏抽中iPhone7

恭喜Ivy抽中10元话费

利用定时器实现中奖记录逐行展示 recordRoll.js

<div class="jb51code">
<pre class="brush: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);

效果图:

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

原文链接:https://www.f2er.com/js/40775.html

猜你在找的JavaScript相关文章