同一段JS代码,修改ID后如何让两个DIV里的内容都滚动呢?

修改了ID但是JS效果只有下面的一个DIV显示,上面的不动,如何才能让两个DIV甚至更多的DIV里的文字滚动呢?求大神帮忙啊 着急

<style>
#andyscroll2 {
overflow: hidden;
background: #fff;
text-align: left;
width:340px;
height:145px;
overflow:hidden;
}
#andyscroll2 a {
font:12px/18px tahoma;
color: #000;
float:left;
width:100%;
text-decoration: none;
display:block;
}
#andyscroll2 a:hover {
font:12px/18px tahoma;
color: #F60;
}

#andyscroll3 {
overflow: hidden;
background: #fff;
text-align: left;
width:340px;
height:145px;
overflow:hidden;
}
#andyscroll3 a {
font:12px/18px tahoma;
color: #000;
float:left;
width:100%;
text-decoration: none;
display:block;
}
#andyscroll3 a:hover {
font:12px/18px tahoma;
color: #F60;
}
</style>
<body>
<div id="andyscroll2">
<div id="scrollmessage2">
<a href="#"> <div class="hy_name">平板车</div>
<div class="hy_unit">9.5吨</div>
<div class="hy_path">鄂尔多斯-河南</div>
<div class="hy_link">点击查看</div></a>
<a href="#"> <div class="hy_name">平板车</div>
<div class="hy_unit">9.5吨</div>
<div class="hy_path">鄂尔多斯-河南</div>
<div class="hy_link">点击查看</div></a>
<a href="#"> <div class="hy_name">平板车</div>
<div class="hy_unit">9.5吨</div>
<div class="hy_path">鄂尔多斯-河南</div>
<div class="hy_link">点击查看</div></a>
<a href="#"> <div class="hy_name">平板车</div>
<div class="hy_unit">9.5吨</div>
<div class="hy_path">鄂尔多斯-河南</div>
<div class="hy_link">点击查看</div></a>
<a href="#"> <div class="hy_name">平板车</div>
<div class="hy_unit">9.5吨</div>
<div class="hy_path">鄂尔多斯-河南</div>
<div class="hy_link">点击查看</div></a>

</div>
</div>
<script type="text/javascript">
<!--
var stopscroll2 = false;
var scrollElem = document.getElementById("andyscroll2");
var marqueesHeight = scrollElem.style.height;
scrollElem.onmouseover = new Function('stopscroll2 = true');
scrollElem.onmouseout = new Function('stopscroll2 = false');
var preTop = 0;
var currentTop = 0;
var stoptime = 0;
var leftElem = document.getElementById("scrollmessage2");
scrollElem.appendChild(leftElem.cloneNode(true));
init_srolltext1();
function init_srolltext1(){
scrollElem.scrollTop = 0;
setInterval('scrollUp()', 50);//的面的这个参数25, 是确定滚动速度的, 数值越小, 速度越快
}
function scrollUp(){
if(stopscroll2) return;
currentTop += 2; //设为1, 可以实现间歇式的滚动; 设为2, 则是连续滚动
if(currentTop == 19) {
stoptime += 1;
currentTop -= 1;
if(stoptime == 180) {
currentTop = 0;
stoptime = 0;
}
}else{
preTop = scrollElem.scrollTop;
scrollElem.scrollTop += 1;
if(preTop == scrollElem.scrollTop){
scrollElem.scrollTop = 0;
scrollElem.scrollTop += 1;
}
}
}
//-->
</script>
因为文字限制 下面的DIV没法放上去了。复制上面的DIV把里面的ID名后面加个3,JS里ID名后也加个3

<!doctype html>
<style>
#andyscroll2 {
overflow: hidden;
background: #fff;
text-align: left;
width:340px;
height:145px;
overflow:hidden;
}
#andyscroll2 a {
font:12px/18px tahoma;
color: #000; 
float:left;
width:100%;
text-decoration: none;
display:block;
}
#andyscroll2 a:hover {
font:12px/18px tahoma;
color: #F60;
}

#andyscroll3 {
overflow: hidden;
background: #fff;
text-align: left;
width:340px;
height:145px;
overflow:hidden;
}
#andyscroll3 a {
font:12px/18px tahoma;
color: #000; 
float:left;
width:100%;
text-decoration: none;
display:block;
}
#andyscroll3 a:hover {
font:12px/18px tahoma;
color: #F60;
}
</style>
<body>
<div id="andyscroll2">
<div id="scrollmessage2"> 
   <a href="#">  <div class="hy_name">平板车</div>
            <div class="hy_unit">9.5吨</div>
            <div class="hy_path">鄂尔多斯-河南</div>
            <div class="hy_link">点击查看</div></a>
   <a href="#">  <div class="hy_name">平板车</div>
            <div class="hy_unit">9.5吨</div>
            <div class="hy_path">鄂尔多斯-河南</div>
            <div class="hy_link">点击查看</div></a>
   <a href="#">  <div class="hy_name">平板车</div>
            <div class="hy_unit">9.5吨</div>
            <div class="hy_path">鄂尔多斯-河南</div>
            <div class="hy_link">点击查看</div></a>
   <a href="#">  <div class="hy_name">平板车</div>
            <div class="hy_unit">9.5吨</div>
            <div class="hy_path">鄂尔多斯-河南</div>
            <div class="hy_link">点击查看</div></a>
   <a href="#">  <div class="hy_name">平板车</div>
            <div class="hy_unit">9.5吨</div>
            <div class="hy_path">鄂尔多斯-河南</div>
            <div class="hy_link">点击查看</div></a>
  
</div> 
</div>
<div id="andyscroll3">
<div id="scrollmessage3"> 
   <a href="#">  <div class="hy_name">平板车</div>
            <div class="hy_unit">9.5吨</div>
            <div class="hy_path">鄂尔多斯-河南</div>
            <div class="hy_link">点击查看</div></a>
   <a href="#">  <div class="hy_name">平板车</div>
            <div class="hy_unit">9.5吨</div>
            <div class="hy_path">鄂尔多斯-河南</div>
            <div class="hy_link">点击查看</div></a>
   <a href="#">  <div class="hy_name">平板车</div>
            <div class="hy_unit">9.5吨</div>
            <div class="hy_path">鄂尔多斯-河南</div>
            <div class="hy_link">点击查看</div></a>
   <a href="#">  <div class="hy_name">平板车</div>
            <div class="hy_unit">9.5吨</div>
            <div class="hy_path">鄂尔多斯-河南</div>
            <div class="hy_link">点击查看</div></a>
   <a href="#">  <div class="hy_name">平板车</div>
            <div class="hy_unit">9.5吨</div>
            <div class="hy_path">鄂尔多斯-河南</div>
            <div class="hy_link">点击查看</div></a>
  
</div> 
</div>
<script type="text/javascript">
<!--
function scoll(scrollElem){

var stopscroll2 = false;
var marqueesHeight = scrollElem.style.height;
scrollElem.onmouseover = new Function('stopscroll2 = true');
scrollElem.onmouseout = new Function('stopscroll2 = false');
var preTop = 0;
var currentTop = 0;
var stoptime = 0;
var leftElem = document.getElementById("scrollmessage2"); 
scrollElem.appendChild(leftElem.cloneNode(true));

function init_srolltext1(){
scrollElem.scrollTop = 0;
setInterval(scrollUp, 50);//的面的这个参数25, 是确定滚动速度的, 数值越小, 速度越快
}
function scrollUp(){
if(stopscroll2) return;
currentTop += 2; //设为1, 可以实现间歇式的滚动; 设为2, 则是连续滚动
if(currentTop == 19) {
   stoptime += 1;
   currentTop -= 1;
   if(stoptime == 180) {
currentTop = 0;
stoptime = 0;
   }
}else{
   preTop = scrollElem.scrollTop;
   scrollElem.scrollTop += 1;
   if(preTop == scrollElem.scrollTop){
scrollElem.scrollTop = 0;
scrollElem.scrollTop += 1;
   }
}
}
init_srolltext1();
}
var scrollElem2 = document.getElementById("andyscroll2");
var scrollElem3 = document.getElementById("andyscroll3");
scoll(scrollElem2);
scoll(scrollElem3);
//-->
</script>

乱来的。

温馨提示:答案为网友推荐,仅供参考
第1个回答  2015-04-17
相同的功能就不要都用id去控制了,用class试试,方法就一次就好了
第2个回答  2015-04-17
建议用jQuery,一个插件就搞掂了
相似回答