<!DOCTYPE <!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<title></title>
<style type="text/css">
body{
font-size: 12px;
font-family: 'Mirosoft YaHei','微软雅黑','SimSun','宋体';
background: #FFFFFF;
margin: 0px;
padding: 0px;
text-align: center;
color: #000000;
}
a{
color: #666666;
text-decoration: none;
display: block;
line-height: 1.5em;
}
a:hover{
color: #CC0000;
text-decoration: none;
}
div.news_root{
width: 255px;
height: 134px;
text-align: left;
margin: 0 auto;
background: url(images/bg_news.gif);
background-repeat: no-repeat;
}
div.news_header{
width: 243px;
height: 16px;
vertical-align: top;
text-align: left;
font-size: 14px;
padding: 6px;
}
#scrollContainer{
width: 245px;
margin: 2px 5px;
overflow: hidden;/*这里是滚动的关键,将超出边框的部分隐藏,造成了滚动的效果*/
text-align: left;
}
</style>
</head>
<body>
<div class="news_root">
<div class="news_header">Headliner</div>
<div id="scrollContainer">
<div id="scrollContent">
<a href="连接地址"> 今天天气好晴朗1</a>
<a href="连接地址"> 今天天气好晴朗2</a>
<a href="连接地址"> 今天天气好晴朗3</a>
<a href="连接地址"> 今天天气好晴朗4</a>
<a href="连接地址"> 今天天气好晴朗5</a>
<a href="连接地址"> 今天天气好晴朗6</a>
<a href="连接地址"> 今天天气好晴朗7</a>
<a href="连接地址"> 今天天气好晴朗8</a>
<a href="连接地址"> 今天天气好晴朗9</a>
<a href="连接地址"> 今天天气好晴朗10</a>
<a href="连接地址"> 今天天气好晴朗11</a>
<a href="连接地址"> 今天天气好晴朗12</a>
<a href="连接地址"> 今天天气好晴朗13</a>
<a href="连接地址"> 今天天气好晴朗14</a>
</div>
</div>
</div>
<script type="text/javascript">
var stopscroll = false; //设置是否滚动的开关
var scrollContHeight = 95;
var scrollContWidth = 230;
var scrollSpeed = 25;
var scrollContainer = document.getElementById("scrollContainer");
var scrollContent = document.getElementById("scrollContent");
do{
scrollContainer.appendChild(scrollContent.cloneNode(true));
}while(scrollContainer.offsetHeight < scrollContHeight);//强制运行一次,复制一次内容到容器中,使滚动看起来更连贯
scrollContainer.style.width = scrollContWidth + "px";
scrollContainer.style.height = scrollContHeight + "px";
scrollContainer.noWrap = true;
scrollContainer.onmouseover = new Function("stopscroll=true");
scrollContainer.onmouseout = new Function("stopscroll=false");
function init () {
// body...
scrollContainer.scrollTop = 0;
setInterval("scrollUp()",scrollSpeed);
}
init();
var currTop = 0;
function scrollUp(){
if (stopscroll == true) return;
currTop = scrollContainer.scrollTop;
scrollContainer.scrollTop +=1;
if (currTop == scrollContainer.scrollTop) {
console.log(currTop + "&&" + scrollContainer.scrollTop)
scrollContainer.scrollTop = 0;
scrollContainer.scrollTop += 1;
}
}
</script>
</body>
</html>