js实现文字无缝向上轮播

六月初六月初 JavaScipt 2019-01-09 14:23:12

纯js实现文字无缝滚动效果：

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			 body{font-size:12px}
	        #demo{overflow:hidden; height:80px; width:280px; margin:90px auto; position:relative;}
	        #demo1{height:auto; text-align:left;}
	        #demo2{height:auto; text-align:left;}
	        #demo1 li, #demo2 li{list-style-type:none;  text-align:left; }
		</style>
	</head>
	<body>
<div id="demo">
    <ul id="demo1">
        <li><a href="#" target="_blank">六月初博客站</a></li>
        <li><a href="#" target="_blank">六月初博客站，是一个记录自己生活点滴、互联网技术的原创独立博客。</a></li>
        <li><a href="#" target="_blank">标准的90后，学着前端，做着后台，会点PS。慢慢的成了一个都会一点什么又都不会的小站长，不过这些都不是事。生活总是会一样学一样，学一样了解一样！我们共同进步！</a></li>
     <li><a href="#" target="_blank">六月初博客站</a></li>
        <li><a href="#" target="_blank">六月初博客站，是一个记录自己生活点滴、互联网技术的原创独立博客。</a></li>
        <li><a href="#" target="_blank">标准的90后，学着前端，做着后台，会点PS。慢慢的成了一个都会一点什么又都不会的小站长，不过这些都不是事。生活总是会一样学一样，学一样了解一样！我们共同进步！</a></li>
     <li><a href="#" target="_blank">六月初博客站</a></li>
        <li><a href="#" target="_blank">六月初博客站，是一个记录自己生活点滴、互联网技术的原创独立博客。</a></li>
        <li><a href="#" target="_blank">标准的90后，学着前端，做着后台，会点PS。慢慢的成了一个都会一点什么又都不会的小站长，不过这些都不是事。生活总是会一样学一样，学一样了解一样！我们共同进步！</a></li>
     <li><a href="#" target="_blank">六月初博客站</a></li>
        <li><a href="#" target="_blank">六月初博客站，是一个记录自己生活点滴、互联网技术的原创独立博客。</a></li>
        <li><a href="#" target="_blank">标准的90后，学着前端，做着后台，会点PS。慢慢的成了一个都会一点什么又都不会的小站长，不过这些都不是事。生活总是会一样学一样，学一样了解一样！我们共同进步！</a></li>
     <li><a href="#" target="_blank">六月初博客站</a></li>
        <li><a href="#" target="_blank">六月初博客站，是一个记录自己生活点滴、互联网技术的原创独立博客。</a></li>
        <li><a href="#" target="_blank">标准的90后，学着前端，做着后台，会点PS。慢慢的成了一个都会一点什么又都不会的小站长，不过这些都不是事。生活总是会一样学一样，学一样了解一样！我们共同进步！</a></li>
    
    </ul>
    <div id="demo2"></div>
</div>
<script type="text/javascript">
        window.onload=function(){
            wheel('demo','demo1','demo2')
        }
        function wheel(demos,demo1s,demo2s){
        	var speed = 40;
        	var demo=document.getElementById(demos);
            var demo2=document.getElementById(demo2s);
            var demo1=document.getElementById(demo1s);
			demo2.appendChild(demo1.cloneNode(true))
            function Marquee(){if(demo.scrollTop>=demo1.offsetHeight){
                    demo.scrollTop=0;
                }
                else{
                    demo.scrollTop=demo.scrollTop+1;
                }
            }
            var MyMar=setInterval(Marquee,speed);
            demo.onmouseover=function(){clearInterval(MyMar)};
            demo.onmouseout=function(){MyMar=setInterval(Marquee,speed); };
        }
</script>
</body>
</html>

因代码比较简单：可以复制直接运行测试!

六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！