JS 實現(xiàn)可停頓的垂直滾動實例代碼
更新時間:2016年11月23日 08:39:14 投稿:jingxian
下面小編就為大家?guī)硪黄狫S 實現(xiàn)可停頓的垂直滾動實例代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
var ScrollMiddle = {
'Odiv':document.getElementById('comment'), // 目標(biāo)DOM
'Oli': document.getElementById('comment').getElementsByTagName('li'),
'times':30, // 配置滾動時間
'delay':1000, // 配置暫停的時間
inint:function(){
this.size = this.Oli.length;
this.height = 59;
this.countHeight =this.size * this.height;
this.Odiv.innerHTML+=this.Odiv.innerHTML;
this.timer = null;
},
scroll:function(){
var _this = this;
_this.inint();
function scrolls(){
var scrollValue = _this.Odiv.scrollTop;
var sub_timer = null;
var num=0;
if(scrollValue>=_this.countHeight){
_this.Odiv.scrollTop = 0;
}else{
_this.Odiv.scrollTop++;
if(scrollValue%_this.height==0){
clearInterval(_this.timer)
function delay(){
num++;
if(num==3){
num=0;
clearInterval(sub_timer);
sub_timer = null;
clearInterval(_this.timer)
_this.timer = setInterval(scrolls,_this.times);
return false;
}
}
sub_timer = setInterval(delay,_this.delay)
}
}
}
this.timer = setInterval(scrolls,_this.times);
}
}
調(diào)用方法:
ScrollMiddle.scroll();
HTML 結(jié)構(gòu):
<ul id="comment"> <li></li> ...... </ul>
CSS結(jié)構(gòu):
#comment{
width:200px;
height:200px;
overflow:hidden;
}
以上這篇JS 實現(xiàn)可停頓的垂直滾動實例代碼就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
微信小程序?qū)崿F(xiàn)列表頁的點贊和取消點贊功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)列表頁的點贊和取消點贊功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-11-11
JavaScript前端靜態(tài)資源預(yù)加載實現(xiàn)示例
這篇文章主要為大家介紹了JavaScript前端靜態(tài)資源預(yù)加載實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11

