溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了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">
<h2>中獎記錄</h2>
</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);
效果圖：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
