您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失!
  • 首 页
  • 在线工具
  • 当前位置:首页 > 网页特效 > 文字特效 >

    Javascript仿歌词智能滚动代码

    时间:2014-06-08 08:55 来源:互联网 作者:源码搜藏 浏览:收藏 挑错 推荐 打印

    运行代码保存代码复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。
    • 为什么说它是智能滚动呢?因为如果我们在布局网页的时候,预留的滚动区域太小的话,有可能文字会有一部分看不到,本款代码可以智能判断区域大小,如果不够显示文字,那么它会控制文字做相应的左右滚动,保证浏览者能看清楚文字,然后继续上下滚动。
    • <script type="text/javascript">
      var tc;
      window.onload=function(){
       var o=document.getElementById('infozone');hscroll(o);
       window.setInterval(function(){window.clearTimeout(tc);o.firstChild.style.marginLeft='0px';scrollup(o,20,0);},8000);
      }
      function scrollup(o,d,c){
       if(d==c){
        var t=o.firstChild.cloneNode(true);
        o.removeChild(o.firstChild);o.appendChild(t);
        t.style.marginTop=o.firstChild.style.marginTop='0px';
        hscroll(o);
       }
       else{
        ch=false;var s=3,c=c+s,l=(c>=d?c-d:0);
        o.firstChild.style.marginTop=-c+l+'px';
        window.setTimeout(function(){scrollup(o,d,c-l)},50);
       }
      }
       
      function hscroll(o){
       var w1=o.firstChild.offsetWidth,w2=o.offsetWidth;
       if(w1<=w2)return;
       tc=window.setTimeout(function(){hs(o,w1-w2,0,w1-w2)},3500);
      }
       
      function hs(o,d,c,p){
       c++;var t=(c>0?-c:c);o.firstChild.style.marginLeft=t+'px';
       if(c==d){if(d==0){tc=window.setTimeout(function(){hs(o,p,0,p)},2500);}else tc=window.setTimeout(function(){hs(o,0,-p,p)},3500);}
       else tc=window.setTimeout(function(){hs(o,d,c,p)},5);
      }
      </script>
    Javascript仿歌词智能滚动代码由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/wenzi/8550.html
    标签:网站源码