H5实现中奖记录逐行滚动切换效果
程序员文章站
2022-07-10 09:44:24
本文实例为大家分享了h5逐行滚动切换效果的具体代码，供大家参考，具体内容如下
前端页面需先引入jquery
<...
本文实例为大家分享了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);
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。