自动滚动js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body,div,ul,li,#content{ margin:0; padding:0; }
#content{ margin:0 auto; background:url(images/bg1.jpg) no-repeat left top; width:1024px; height:768px;}
#scrolllayer {float:left;overflow:hidden;height:430px;padding:0px;width:670px; margin:270px 0 0 320px; display:inline;}
#scrollmessage {float:left;text-align:left;width:650px;font-size:14px;font-family: "宋体";}
#scrollmessage ul {list-style:none; padding:0; margin:0;}
#scrollmessage li {color:#FF0000;background:white;line-height:31px}
#scrollmessage li.bg1{ background:red;} <!-- #CAEBFF-->
#scrollmessage li a{color:#FF0000; text-decoration:none;}
.scrop1,.scrop2,.scrop3,.scrop4{ color:#072549; width:114px; text-align:center; float:left; clear:none; border-right:1px dashed #fff; }
.scrop2{font-weight:bold; width:157px; }
.scrop3{ width:166px; color:#8c6900;}
.scrop4{ width:210px; color:#666; border-right:0;}
.fc1{color:#ff0000;}
</style>
</head>
<body>
<div id="content">
<div id="scrolllayer">
<div id="scrollmessage">
<ul>
<li><div class="scrop1">海口</div><div class="scrop2">HU7181</div><div class="scrop3">2小时</div> <div class="scrop4">天气原因</div></li>
<li class="bg1">
<div class="scrop1">海口</div><div class="scrop2">HU7281</div><div class="scrop3">2小时</div> <div class="scrop4 fc1">机场事故</div></li>
<li><div class="scrop1">海口</div><div class="scrop2">HU7381</div><div class="scrop3">2小时</div> <div class="scrop4">天气原因</div></li>
<li class="bg1"><div class="scrop1">海口</div><div class="scrop2">HU7481</div><div class="scrop3">2小时</div> <div class="scrop4">天气原因</div></li>
<li><div class="scrop1">海口</div><div class="scrop2">HU7581</div><div class="scrop3">2小时</div> <div class="scrop4">天气原因</div></li>
<li class="bg1"><div class="scrop1">海口</div><div class="scrop2">HU7681</div><div class="scrop3">2小时</div> <div class="scrop4">天气原因</div></li>
<li><div class="scrop1">海口</div><div class="scrop2">HU7181</div><div class="scrop3">2小时</div> <div class="scrop4">天气原因</div></li>
<li class="bg1"><div class="scrop1">海口</div><div class="scrop2">HU7281</div><div class="scrop3">2小时</div> <div class="scrop4">天气原因</div></li>
<li><div class="scrop1">海口</div><div class="scrop2">HU7381</div><div class="scrop3">2小时</div> <div class="scrop4 fc1">机场事故</div></li>
<li class="bg1"><div class="scrop1">海口</div><div class="scrop2">HU7481</div><div class="scrop3">2小时</div> <div class="scrop4">天气原因</div></li>
<li><div class="scrop1">海口</div><div class="scrop2">HU7581</div><div class="scrop3">2小时</div> <div class="scrop4">天气原因</div></li>
<li class="bg1"><div class="scrop1">海口</div><div class="scrop2">HU7681</div><div class="scrop3">2小时</div> <div class="scrop4">天气原因</div></li>
</ul>
</div>
</div>
</div>
</body>
<script type="text/javascript" language="javascript">
<!--
//以下参数请勿修改
try{
var marqueesHeight = 420; //高度
var stopscroll = false;
var scrollElem = document.getElementById("scrolllayer");
with(scrollElem){
style.width = 670;//宽度
style.height = marqueesHeight;
style.overflow = 'hidden';
noWrap = true;
}
scrollElem.onmouseover = new Function('stopscroll = true');
scrollElem.onmouseout = new Function('stopscroll = false');
var preTop = 0;
var currentTop = 0;
var stoptime = 0;
var times=0;//循环次数
var leftElem = document.getElementById("scrollmessage");
scrollElem.appendChild(leftElem.cloneNode(true));//不停的循环，复制子节点
init_srolltext();
}catch(e) {}
function init_srolltext(){
scrollElem.scrollTop = 0;//初始化位置
setInterval('scrollUp()', 1); //滚动速度
}
function scrollUp(){
if(stopscroll) return;
currentTop += 1;
if(currentTop == 32) { //滚动距离
stoptime += 1;
currentTop -= 1;
if(stoptime == 120) { //停顿时间
currentTop = 0;
stoptime = 0;
}
}else{
preTop = scrollElem.scrollTop;//preTop一直在增加
scrollElem.scrollTop += 1;
if(preTop == scrollElem.scrollTop){
scrollElem.scrollTop = 0;
scrollElem.scrollTop += 15;
}
}
}
//-->
</script>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body,div,ul,li,#content{ margin:0; padding:0; }
#content{ margin:0 auto; background:url(images/bg1.jpg) no-repeat left top; width:1024px; height:768px;}
#scrolllayer {float:left;overflow:hidden;height:430px;padding:0px;width:670px; margin:270px 0 0 320px; display:inline;}
#scrollmessage {float:left;text-align:left;width:650px;font-size:14px;font-family: "宋体";}
#scrollmessage ul {list-style:none; padding:0; margin:0;}
#scrollmessage li {color:#FF0000;background:white;line-height:31px}
#scrollmessage li.bg1{ background:red;} <!-- #CAEBFF-->
#scrollmessage li a{color:#FF0000; text-decoration:none;}
.scrop1,.scrop2,.scrop3,.scrop4{ color:#072549; width:114px; text-align:center; float:left; clear:none; border-right:1px dashed #fff; }
.scrop2{font-weight:bold; width:157px; }
.scrop3{ width:166px; color:#8c6900;}
.scrop4{ width:210px; color:#666; border-right:0;}
.fc1{color:#ff0000;}
</style>
</head>
<body>
<div id="content">
<div id="scrolllayer">
<div id="scrollmessage">
<ul>
<li><div class="scrop1">海口</div><div class="scrop2">HU7181</div><div class="scrop3">2小时</div> <div class="scrop4">天气原因</div></li>
<li class="bg1">
<div class="scrop1">海口</div><div class="scrop2">HU7281</div><div class="scrop3">2小时</div> <div class="scrop4 fc1">机场事故</div></li>
<li><div class="scrop1">海口</div><div class="scrop2">HU7381</div><div class="scrop3">2小时</div> <div class="scrop4">天气原因</div></li>
<li class="bg1"><div class="scrop1">海口</div><div class="scrop2">HU7481</div><div class="scrop3">2小时</div> <div class="scrop4">天气原因</div></li>
<li><div class="scrop1">海口</div><div class="scrop2">HU7581</div><div class="scrop3">2小时</div> <div class="scrop4">天气原因</div></li>
<li class="bg1"><div class="scrop1">海口</div><div class="scrop2">HU7681</div><div class="scrop3">2小时</div> <div class="scrop4">天气原因</div></li>
<li><div class="scrop1">海口</div><div class="scrop2">HU7181</div><div class="scrop3">2小时</div> <div class="scrop4">天气原因</div></li>
<li class="bg1"><div class="scrop1">海口</div><div class="scrop2">HU7281</div><div class="scrop3">2小时</div> <div class="scrop4">天气原因</div></li>
<li><div class="scrop1">海口</div><div class="scrop2">HU7381</div><div class="scrop3">2小时</div> <div class="scrop4 fc1">机场事故</div></li>
<li class="bg1"><div class="scrop1">海口</div><div class="scrop2">HU7481</div><div class="scrop3">2小时</div> <div class="scrop4">天气原因</div></li>
<li><div class="scrop1">海口</div><div class="scrop2">HU7581</div><div class="scrop3">2小时</div> <div class="scrop4">天气原因</div></li>
<li class="bg1"><div class="scrop1">海口</div><div class="scrop2">HU7681</div><div class="scrop3">2小时</div> <div class="scrop4">天气原因</div></li>
</ul>
</div>
</div>
</div>
</body>
<script type="text/javascript" language="javascript">
<!--
//以下参数请勿修改
try{
var marqueesHeight = 420; //高度
var stopscroll = false;
var scrollElem = document.getElementById("scrolllayer");
with(scrollElem){
style.width = 670;//宽度
style.height = marqueesHeight;
style.overflow = 'hidden';
noWrap = true;
}
scrollElem.onmouseover = new Function('stopscroll = true');
scrollElem.onmouseout = new Function('stopscroll = false');
var preTop = 0;
var currentTop = 0;
var stoptime = 0;
var times=0;//循环次数
var leftElem = document.getElementById("scrollmessage");
scrollElem.appendChild(leftElem.cloneNode(true));//不停的循环，复制子节点
init_srolltext();
}catch(e) {}
function init_srolltext(){
scrollElem.scrollTop = 0;//初始化位置
setInterval('scrollUp()', 1); //滚动速度
}
function scrollUp(){
if(stopscroll) return;
currentTop += 1;
if(currentTop == 32) { //滚动距离
stoptime += 1;
currentTop -= 1;
if(stoptime == 120) { //停顿时间
currentTop = 0;
stoptime = 0;
}
}else{
preTop = scrollElem.scrollTop;//preTop一直在增加
scrollElem.scrollTop += 1;
if(preTop == scrollElem.scrollTop){
scrollElem.scrollTop = 0;
scrollElem.scrollTop += 15;
}
}
}
//-->
</script>
</html>
