滚动文字、新闻特效的三种实现方法

由于marquee标签现在用得是越来越少了,所以滚动效果的做法大多也都改用javascript来实现了,至于不明白为什么不直接用marquee标签的朋友,不妨先阅读一下这篇文章。

  • 第1页:用javascript模拟marquee的做法
  • 第2页:自动根据内容自动进行左右滚动的效果
  • 第3页:最简单的滚动实现方法
  •  

    第一种方法:用javascript模拟marquee的做法。演示 

    <!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> 热点新闻webjx.com</title>
    <style type="text/css">
    <!–
    body {
    margin: 0px;
    font-size: 12px;
    color: #938C43;
    line-height: 150%;
    text-align:center;
    }
    a:link{color: #9D943A;font-size:12px;}
    a:hover{color: #FF3300;font-size:12px;}
    a:visited{color: #9D943A;font-size:12px;}
    a.red:link{color: #ff0000;font-size:12px;}
    a.red:hover{color: #ff0000;font-size:12px;}
    a.red:visited{color: #ff0000;font-size:12px;}
    #marqueeBox{background:#f7f7f7;border:1px solid silver;padding:1px;text-align:center;margin:0 auto;}
    –>
    </style>
    </head>

    <body>
    <h4>滚动新闻</h4>
    <script language="JavaScript" type="text/javascript">
    var marqueeContent=new Array();
    marqueeContent[0]="<a href=http://xyq.163.com/news/2006/11/2-2-20061102170913.html target=_blank>用“梦幻密保”快速取回帐号密码</a>";
    marqueeContent[1]="<a href=http://ekey.163.com/ target=_blank>网易将军令官方网站</a>";
    marqueeContent[2]="<a href=http://xyq.163.com/download/wallpaper.htm target=_blank>最新壁纸下载</a>";
    marqueeContent[3]="<a href=http://xyq.163.com/download/around.htm target=_blank>最新屏保下载</a>";
    var marqueeInterval=new Array();
    var marqueeId=0;
    var marqueeDelay=2000;
    var marqueeHeight=20;
    function initMarquee() {
    var str=marqueeContent[0];
    document.write(‘<div id="marqueeBox" style="overflow:hidden;width:250px;height:’+marqueeHeight+’px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval(‘startMarquee()’,marqueeDelay)"><div>’+str+'</div></div>’);
    marqueeId++;
    marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);
    }
    function startMarquee() {
    var str=marqueeContent[marqueeId];
    marqueeId++;
    if(marqueeId>=marqueeContent.length) marqueeId=0;
    if(document.getElementById("marqueeBox").childNodes.length==1) {
    var nextLine=document.createElement(‘DIV’);
    nextLine.innerHTML=str;
    document.getElementById("marqueeBox").appendChild(nextLine);
    }
    else {
      document.getElementById("marqueeBox").childNodes[0].innerHTML=str;
      document.getElementById("marqueeBox").appendChild(document.getElementById("marqueeBox").childNodes[0]);
      document.getElementById("marqueeBox").scrollTop=0;
    }
    clearInterval(marqueeInterval[1]);
    marqueeInterval[1]=setInterval("scrollMarquee()",20);
    }
    function scrollMarquee() {
    document.getElementById("marqueeBox").scrollTop++;
    if(document.getElementById("marqueeBox").scrollTop%marqueeHeight==(marqueeHeight-1)){
    clearInterval(marqueeInterval[1]);
    }
    }
    initMarquee();
    </script>

    </body>
    </html>

  • 第1页:用javascript模拟marquee的做法
  • 第2页:自动根据内容自动进行左右滚动的效果
  • 第3页:最简单的滚动实现方法
  • 第二种方法:这个更强,能自动根据内容自动进行左右滚动,解决了宽度太小造成的截取问题。演示

    <html>
    <head>
    <title> 网页文本SCROLL//webjx.com </title>
    <style type="text/css">
    #infozone{font-size:12px;color:#aa6;overflow:hidden;width:100px;height:20px;}
    #infozone div{height:20px;line-height:20px;white-space:nowrap;overflow:hidden;}
    </style>
    <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);},10000);
    }
    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>
    </head>

    <body>
    <div id="infozone"><div>温岚 – 屋顶(周杰伦 对唱版)</div><div>范玮琪 – 那些花儿</div><div>张韶涵 – 娃娃</div><div>孙楠&韩红 – 美丽的神话</div></div>
    </body>
    </html>

  • 第1页:用javascript模拟marquee的做法
  • 第2页:自动根据内容自动进行左右滚动的效果
  • 第3页:最简单的滚动实现方法
  •  

    第三种是最精简的,代码非常少。演示

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
      <TITLE> 网页文本定时变动的特效代码 </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
      <style type="text/css">
    #newslist{
      background:#f7f7f7;border:1px solid silv
    er;padding:1px;height:20px;line-height:20px;width:300px;
    }
    #contain{
      font-size:12px;overflow:hidden;list-style:none;width:300px;height:20px;margin:0px;padding:0;
    }
    #contain li{
      height:20px;line-height:20px;white-space:nowrap;overflow:hidden;
    }
    </style>
    </HEAD>

    <BODY>
    <div id="newslist">
      <ul id="contain">
       <li><a href="http:/www.webjx.com">网页教学网webjx.com11111</a></li>
       <li><a href="http:/www.webjx.com">网页教学网webjx.com00000</a></li>
       <li><a href="http:/www.webjx.com">网页教学网webjx.com22222</a></li>
       <li><a href="http:/www.webjx.com">网页教学网webjx.com33333</a></li>
       <li><a href="http:/www.webjx.com">网页教学网webjx.com44444</a></li>
      </ul>
    </div>
    <SCRIPT LANGUAGE="JavaScript">
    function xx(){
    var container=document.getElementById("contain");
    container.appendChild(container.firstChild);
    }
    setInterval("xx()",3000);
    </SCRIPT>
    </BODY>
    </HTML>

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注