jquery实现简单的文本循环滚动

先看效果。

 

说下原理，利用jqury的scrollTop方法控制滚动条到指定的位置，至于连续无缝滚动是将滚动的内容在初始化时复制一份，用于在滚动到末尾时候衔接，避免出现空白。

 

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自动滚屏</title>
    <style>
        body{
            margin: 0;
            width: 800px;
			overflow:hidden;
        }
		
		#boxDiv{
			height:200px;
			overflow:hidden;
		}
    </style>
</head>
<body>
    <div id="boxDiv" style="">
	<div id="contentDiv">
            1<br/>
			2<br/>
			3<br/>
			4<br/>
			5<br/>
			6<br/>
			7<br/>
			8<br/>
			9<br/>
			10<br/>
			11<br/>
			12<br/>
			13<br/>
			14<br/>
			15<br/>
			16<br/>
			17<br/>
			18<br/>
========================================================<br/>
    </div>
	</div>
	
	<script src="https://www.w3school.com.cn//jquery/jquery.js"></script>
    <script>
	
        var newTop ;
		var div=$("#boxDiv");
		var boxHeight=div.height();
		var contentHeight=$('#contentDiv').height();
		$('#contentDiv').append($('#contentDiv').html());
		
        //使用定时器
        var timer = setInterval(function(){
			var top=div.scrollTop();
            //文本是否已经到底部（底部出现在浏览器窗口中）
            if( top>=contentHeight){
			console.log(top);
                //回到0				
				div.scrollTop(0);
            }else{

                //每次在原来的基础上移动
                newTop =  top;
                div.scrollTop(newTop + 1);
            }

        },10);
    </script>
</body>
</html>

　　

 

posted @ 2021-09-29 13:52  馨语随风  阅读(895)  评论(0)    收藏  举报