zoukankan      html  css  js  c++  java
  • 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;
                 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>
    

      

     

  • 相关阅读:
    基础DP背包
    哲学思絮01
    Vue使用ElementUI
    Vue-Mock数据
    Vue生命周期
    Vue实战之CURD
    读《间客》有感
    ASP.Net Core网站发布
    Cycling之 标签化
    Vue环境搭建
  • 原文地址:https://www.cnblogs.com/tracyjfly/p/15352548.html
Copyright © 2011-2022 走看看