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

前端页面需先引入jquery

中奖记录跑马灯特效

.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;

}

中奖记录

恭喜Ivy抽中10元话费

恭喜LinDL抽中100元京东E卡

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

恭喜Ivy抽中30元话费

恭喜金坎抽中50元话费

恭喜Ivy抽中80元话费

恭喜Ivy抽中200元话费

恭喜慧林抽中5000元话费

恭喜张敏抽中iPhone7

恭喜Ivy抽中10元话费

$(document.body).ready(function(){

$(".record_list").RollTitle({line:1,speed:800,timespan:1});

});

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

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);

效果图：

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

中奖人js滚动效果_H5实现中奖记录逐行滚动切换效果相关推荐

html百叶窗切换效果,js实现绿白相间竖向网页百叶窗动画切换效果
本文实例讲述了js实现绿白相间竖向网页百叶窗动画切换效果.分享给大家供大家参考.具体分析如下: 前面我们讲解了一个网页百叶窗切换动画效果,不过是横向百叶窗,这个是竖向百叶窗,代码基本一样: 百叶窗页面 ...
html做app的切换效果,Vue-router结合transition实现app动画切换效果实例分享
本文主要为大家带来一篇Vue-router结合transition实现app前进后退动画切换效果的实例.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望能帮助到大家. ...
vueloopscroll 公告文字循环滚动中奖记录循环滚动插件
源码地址:https://gitee.com/sywlgzs/vueloopscroll 使用 npm安装 npm i vueloopscroll 使用方法: 1.在 main.js中引入impor ...
js 展开折叠动画原理，jquery的toggle切换效果
效果图: 想法: jquery的展开折叠动画效果很好看,想自己实现一个,结果发现仅仅只靠css添加类和动画是不行,最开始的思路是折叠时候设置高度为0,展开时设置高度设置为auto,让他自己撑开,可是t ...
java幻灯片效果_在PowerPoint 中，幻灯片切换效果是指（）。
[判断题]在用户需求分析时观察用户手工操作过程不是为了模拟手工操作过程,而是为了获取第一手资料,并从中提取出有价值的需求. [单选题]在 E-R模型中,包含以下基本成分 [简答题]课程9月作业题目有 ...
jQuery实现图片卡片层叠式切换效果
本功能的开发,主要看到一个网站有这个功能,但是是flash做的,当时就吐血了,于是就自己研究用jquery来做一下,功能比较简单,没用进行美化,代码没有经过优化的,如果哪位高手可以优化修改下也不错!好 ...
用CSS3实现图片切换效果
当几个页面的整体布局相同,只有某个部分在各页面不同时,可以将整体布局的CSS样式写在同一个.css文件中.本次的CSS实现图片s是每个页面下的图片切换效果不同,除此之外,其他的效果都一样.因此,我们可 ...
（专升本）PowerPoint（设置幻灯片切换效果）
目录幻灯片切换效果分为? 操作 "计时"组幻灯片切换效果分为? #mermaid-svg-ebDqVHASnUPePLJI .label{font-family:'trebuc ...
Android 屏幕切换效果实现 (转)
本教程将介绍如何实现屏幕间的切换效果.在前述 Ophone 2D UI 动画教程中介绍了OPhone提供的animation功能,里面介绍了如何操作具体View的动画效果,在一般情况下我们希望在程序 ...
Android屏幕切换效果实现
屏幕切换效果实现摘自:程云峰,网名 icess,杭州恒生电子研发中心. 个人网站: http://www.chengyunfeng.com/ 本教程将介绍如何实现屏幕间的切换效果.在前述 Ophon ...

中奖人js滚动效果_H5实现中奖记录逐行滚动切换效果

中奖记录

中奖人js滚动效果_H5实现中奖记录逐行滚动切换效果相关推荐

最新文章

热门文章