<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style type="text/css">
body {
font-size: 12px;
line-height: 24px;
text-align: center; /*页面内容居中*/
}
* {
/*去掉所有标签的margin和padding值*/
margin: 0px;
padding: 0px;
}
ul {
list-style: none;
/*去掉ul标签的默认点样式 */
}
a img {
border: none;
/*超链接下,图片的边框 */
}
a {
color: #333;
text-decoration: none;
/*超链接样式 */
}
a:HOVER {
color: #ff0000;
}
#news {
width: 399px;
height: 251px;
background: url("images/adRotator_5.jpg") repeat-y;/*背景垂直排列 */
background-size: cover;
margin-left: auto;
/*firefox下居中 */
margin-right: auto;
text-align: left;
/*新闻内容靠左 */
border: solid red 2px;
}
#newst {
width:399px;
height:64px;
background-color:gray;
}
#newst a {
float: right;
color: white;
font-size: 26px;
margin-right: 30px;
margin-top: 30px;
display: inline;
}
/*底部样式 */
#newsd{
width:399px;
height:16px;
background-color: pink;
}
/*中间样式 */
#newsz{
height: 144px;
width:335px;
margin-left: 35px;
margin-top: 13px;
margin-bottom: 14px;
overflow: hidden;
/*这个一定要加,免得撑高中间部分 */
}
#news ul li {
height: 24px;
}
#news ul li a {
width: 180px;
float: left;
display: block;
overflow: hidden;
background: url("images/bg-left.gif") 10px 5px no-repeat;
text-indent: 15px;/*规定文本块中首行文本的缩进 */
height: 24px;
}
#news ul li span{
float: right;
color: red;
}
</style>
</head>
<body>
<marquee direction="left">我心事的消息</marquee>
<!-- 新闻动态开始 -->
<div id="news">
<!-- 头部 -->
<div id="newst">
<a href="#">查看更多</a>
</div>
<!-- 中间 -->
<div id="newsz">
<ul id="p1">
<li><a href="#">新闻滚动内容内容内容演示1</a><span>2016-09-09</span></li>
<li><a href="#">新闻滚动内容内容内容演示2</a><span>2016-09-09</span></li>
<li><a href="#">新闻滚动内容内容内容演示3</a><span>2016-09-09</span></li>
<li><a href="#">新闻滚动内容内容内容演示4</a><span>2016-09-09</span></li>
<li><a href="#">新闻滚动内容内容内容演示5</a><span>2016-09-09</span></li>
<li><a href="#">新闻滚动内容内容内容演示6</a><span>2016-09-09</span></li>
<li><a href="#">新闻滚动内容内容内容演示7</a><span>2016-09-09</span></li>
<li><a href="#">新闻滚动内容内容内容演示8</a><span>2016-09-09</span></li>
<li><a href="#">新闻滚动内容内容内容演示9</a><span>2016-09-09</span></li>
<li><a href="#">新闻滚动内容内容内容演示10</a><span>2016-09-09</span></li>
</ul>
<ul id="p2">
<li></li>
</ul>
</div>
<!-- 底部 -->
<div id="newsd"> </div>
</div>
</body>
<script type="text/javascript">
/*获得滚动区域,也就是新闻中间部分div的ID,用变量area来表示它。 */
var area = document.getElementById("newsz");
var p1 = document.getElementById("p1");
var p2 = document.getElementById("p2");
/*当p1的高度超出area的高度时候 */
if(area.offsetHeight <=p1.offsetHeight){
/*复制p1到p2(为循环滚动做准备)*/
p2.innerHTML = p1.innerHTML;
// console.log("copy")
}
function goUp() {
/*scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。 */
area.scrollTop++;
/*当p1刚好超出area的区域时候 */
if(area.scrollTop >= p1.offsetHeight){
/*立马让p1又退回到滚动区域 */
area.scrollTop = 0;
}
}
var mySet = setInterval("goUp()",50);
area.onmouseover=function(){
clearInterval(mySet);
}
area.onmouseout=function(){
mySet = setInterval("goUp()",50);
}
</script>
</html>
简单偷下懒,直接上代码了,在这里贴上JS原理详解链接: