练习卷动式新闻广告牌

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="gb2312" />
<meta name="keywords" content="" />
<meta name="description"  content="" />
<title>卷动式新闻广告牌</title>
<style type="text/css">
*{margin:0px;padding:0px; }
.box{margin:50px;500px;border:1px solid #cdcdcd;padding:1px;  }
.box h3{font-size:14px;font-weight:bold;text-indent:20px;}
.box .hd{height:30px;line-height:30px;background:#f0f0f0;border-bottom:1px solid #cdcdcd;    }
.box .bd{padding:10px 20px;line-height:30px; }
 #textTable{line-height:30px; }
</style>
</head>
<body>
 <div class="box">
  <div class="hd">
   <h3>卷动式新闻广告牌</h3>
  </div>
  <div class="bd">
   <div class="" id="textTable" >
    <div class="tobody"><a  title="" href="www.soso.com">1.如何快速的</a></div>
    <div class="tobody"><a  title="" href="www.soso.com">2.如何快速的</a></div>
    <div class="tobody"><a  title="" href="www.soso.com">3.如何快速的</a></div>
   </div>
  </div>
 </div>
<script type="text/javascript">
 //设置新闻信息与链接网址;

 //基础参数设置;
 scrollheight=30;//卷动高度;
 lineNum=1;//画面中同时显示的新闻数量;
 boardheight=90;//新闻广告牌的高度
 doScroll=true;
 scrollCountTime=0;
 scrollStopTime=200;
 scrollTimeOut=10;//卷动更新时间;
 offSet=scrollheight;
 starSetp=0;
 //卷动初始设置;
 function G(){
  return document.getElementById("textTable");
 }
 //设置模块里面内容;
 var  Dom = {
  ByClassName:function(ClassName){
   try{
    var l = G().getElementsByTagName("div");
    var r = new Array(),j=0;
    for(var i = 0 ; i < l.length ; i ++){
      if(l[i].className==ClassName)
     // if(l[i].getAttribute("class").toLocaleString()==ClassName.toLocaleString())
      {
       r[j++]=l[i];
 }
     }
     return r;
   }
   catch(e){
     return null;
   }
   }
 }
var scrollBox= Dom.ByClassName("tobody");
 function setScrollTime(){
  G().style.height=boardheight+"px";
  G().style.overflowY="hidden";
  G().scrollTop=0;
  //当鼠标指针移入时停止新闻转动
  G().onmouseover=new Function("doScroll=false");
  //当鼠标移出时开始新闻转动
  G().onmouseout=new Function("doScroll=true");
  //输出新闻信息的表格
  scrollTextTable="<div>";
  loopY=0;
  for(x=0;x<scrollBox.length*2;x++){
   scrollTextTable+="<div class='tobody'>"+scrollBox[loopY].innerHTML+"</div>";
   loopY++;
   if(loopY>scrollBox.length-1){
    loopY=0
   }
  }
  scrollTextTable+="</div>"
  G().innerHTML=scrollTextTable;
  G().scrollTop=0;
  //定时调用scrollUp函数进行新闻卷动
  setInterval("scrollUp()",scrollTimeOut)
 }
 function scrollUp(){
   if (doScroll==false){return};
   offSet++;
   if (offSet==scrollheight+1){
    scrollCountTime++;
    offSet--;
    if(scrollCountTime==scrollStopTime){
     offSet=0;
     scrollCountTime=0;
    }
   }else{
   starSetp=G().scrollTop+(scrollheight*lineNum);
   G().scrollTop++;
   if (starSetp==G().scrollTop+(scrollheight*lineNum)){
    G().scrollTop=scroll*(lineNum-1);
    G().scrollTop++;
   }
  }
 }
setScrollTime();
</script>
</body>
</html>

原文地址:https://www.cnblogs.com/yansen/p/2387816.html