js实现文字无缝向上轮播

纯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>

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

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