zoukankan      html  css  js  c++  java
  • 练习卷动式新闻广告牌

    <!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>

  • 相关阅读:
    c99柔性数组
    Android自定义XML属性以及遇到的命名空间的问题
    [翻译]API Guides
    使用线程实现视图平滑滚动
    [翻译]API Guides
    [翻译]API Guides
    [翻译]Android官方文档
    探究Android中通过继承ViewGroup自定义控件的原理
    初探Android动画之门
    ViewPager、Fragment、Matrix综合使用实现Tab滑页效果
  • 原文地址:https://www.cnblogs.com/yansen/p/2387816.html
Copyright © 2011-2022 走看看