JS——间歇循环滚动

最新推荐文章于 2022-02-11 22:37:48 发布

lannieZ

最新推荐文章于 2022-02-11 22:37:48 发布

阅读量357

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/lannieZ/article/details/108793251

版权

js 专栏收录该内容

58 篇文章 1 订阅

订阅专栏

<body>
	<div id="recordImg"></div>
</body>
<script>
	var StandArr = [
		{
			user: '用户152****6983',
			avatar: 'avatar.jpg',
			money: '1'
		},
		{
			user: '用户152****6983',
			avatar: 'avatar.jpg',
			money: '2',
        },
        {
			user: '用户152****6983',
			avatar: 'avatar.jpg',
			money: '3'
		},
		{
			user: '用户152****6983',
			avatar: 'avatar.jpg',
			money: '4',
        },
        {
			user: '用户152****6983',
			avatar: 'avatar.jpg',
			money: '5'
		},
		{
			user: '用户152****6983',
			avatar: 'avatar.jpg',
			money: '6',
		}
	]
    var StandStr = "";
    StandArr.forEach(e => {
        StandStr += ' <div class="flex-row-between record">' + 
                        '<div class="flex-row-start">' + 
                            '<div>' + 
                                '<img class="avatar" src="' + e.avatar + '" alt=""> ' + 
                            '</div>' +
                            '<div>' + e.user + '</div>' + 
                        '</div>' + 
                        '<div>' + '成功提现' + '<span class="red-color">' + e.money + '</span>' + '元' + '</div>' + '</div>'
	});
    document.getElementById("recordImg").innerHTML = StandStr;
   
    var recordImg =document.getElementById('recordImg');    
    var lHeight = 75;
    var time = 10;
    recordImg.innerHTML+=recordImg.innerHTML;
    recordImg.scrollTop = 0;
    var timer;
    function scrollMove(){
        recordImg.scrollTop++;
        timer = setInterval("scrollUp()",time);
    }
    function scrollUp(){
        if(recordImg.scrollTop % lHeight==0){//滚动一行后，延时2秒
            clearInterval(timer);
            setTimeout("scrollMove()",2000);
        } else {
            recordImg.scrollTop++;
            if(recordImg.scrollTop>=recordImg.scrollHeight/2){    //判断滚动高度,当滚动高度大于area本身的高度时，使其回到原点重新滚动    
                recordImg.scrollTop = 0;    
            }
        }
    }    
    setTimeout("scrollMove()",2000);//延迟2秒后执行scrollMove
</script>

lannieZ

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS——间歇循环滚动

<body> <div id="recordImg"></div></body><script> var StandArr = [ { user: '用户152****6983', avatar: 'avatar.jpg', money: '1' }, { user: '用户152****6983', avatar: 'avatar.jpg', money: '2', },
复制链接

扫一扫