Home > Article > Web Front-end > Example code to implement seamless upward scrolling of news list based on JS_javascript skills

Example code to implement seamless upward scrolling of news list based on JS_javascript skills

WBOYOriginal: 2016-05-16 15:18:531198browse

When there is a lot of news and it is unprecedentedly limited, using scrolling is a good choice. This chapter will introduce how to achieve this effect through code examples.

Code examples are as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>文字列表无缝向上滚动代码</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
border:0px;
}
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{
list-style-type:none;
height:22px;
text-align:left;
text-indent:15px;
}
#demo2 li{
list-style-type:none;
height:22px;
text-align:left;
text-indent:15px;
}
</style>
<script type="text/javascript"> 
var speed=40 
window.onload=function(){
var demo=document.getElementById("demo"); 
var demo2=document.getElementById("demo2"); 
var demo1=document.getElementById("demo1"); 
demo2.innerHTML=demo1.innerHTML 
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>
</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">没有人一开始就是高手，都是从菜鸟开始</a></li>
<li><a href="#" target="_blank">每一天都是新的需要好好珍惜</a></li>
<li><a href="#" target="_blank">怨天尤人是没有任何作用的</a></li>
<li><a href="#" target="_blank">今天你写代码了吗</a></li>
<li><a href="#" target="_blank">分享的胸怀和互助的精神最终成就了你</a></li>
</ul>
<div id="demo2"></div>
</div>
</body>
</html>

The above code implements the scrolling effect of the news list. The implementation process is introduced below:

1. Implementation principle:

The general principle is as follows. There are two sub-elements demo1 and demo2 in the demo element, and the content in demo1 is stored in demo2. The reason for doing this is so that demo2 can follow demo1 when scrolling upward. Otherwise, it will not be seamless scrolling, but seamless scrolling. When the content of demo1 is completely blocked, that is, when demo1 is completely scrolled up, demo2 will be exactly at the position where demo1 starts to scroll, and then the scrollTop value of demo will be reset. , let the scrolling start over, thus achieving a seamless scrolling effect.

This is the example code to implement seamless upward scrolling of news list based on JS. I hope you can apply this code according to your actual needs.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery elastic layer plug-in jquery.fancybox.js usage example_jqueryNext article：jQuery elastic layer plug-in jquery.fancybox.js usage example_jquery

See more

Example code to implement seamless upward scrolling of news list based on JS_javascript skills

Related articles