zoukankan      html  css  js  c++  java
  • [js脚本实现]图片向上滚动并且有停顿的特效

    [js脚本实现]图片向上滚动并且有停顿的特效

    <!-- 把下列代码放到<body>中-->
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td>
                  <table width="500" border="0" cellspacing="0" align="center">
          <tr><td>
            <div id="article1" style="500;">
      <!-- 设置一个DIV容纳图片宽度为设置为图片宽度-->
      <!-- 使用表格容纳图片内容-->
              <TABLE cellSpacing="0" cellPadding="0" width="500" border="0">
    <tr><td height=80 align=center><a href=http://www.webjx.com target=_blank><img src=http://www.webjx.com/upfiles/specials/geren.jpg width=500 height=80 border=0></a></td>
    </tr><tr><td height=80 align=center><a href=http://www.webjx.com target=_blank><img src=http://www.webjx.com/upfiles/specials/action.jpg width=500 height=80 border=0></a></td>
    </tr><tr><td height=80 align=center><a href=http://www.webjx.com target=_blank><img src=http://www.webjx.com/upfiles/specials/flash1.jpg width=500 height=80 border=0></a></td>
    </tr><tr><td height=80 align=center><a href=http://www.webjx.com target=_blank><img src=http://www.webjx.com/upfiles/specials/aplet.jpg width=500 height=80 border=0></a></td>
    </tr><tr><td height=80 align=center><a href=http://www.webjx.com target=_blank><img src=http://www.webjx.com/upfiles/specials/flash.jpg width=500 height=80 border=0></a></td>
    </tr><tr><td height=80 align=center><a href=http://www.webjx.com target=_blank><img src=http://www.webjx.com/upfiles/specials/flash.jpg width=500 height=80 border=0></a></td>
    </tr><tr><td height=80 align=center><a href=http://www.webjx.com target=_blank><img src=http://www.webjx.com/upfiles/specials/net.jpg width=500 height=80 border=0></a></td>
    </tr>          </TABLE>
            </div>
            <div id="article2" style="position:absolute;z-index:1;visibility:hidden"></div>
            </td></tr>
    </table>

    <script>
    articleHeight=80; //设置为图片高度
    stopscrolla=false;
    article1.scrollTop=0;
    with(article1){
      style.width=0;
      style.height=articleHeight;
      style.overflowX="visible";
      style.overflowY="hidden";
      noWrap=true;
      onmouseover=new Function("stopscrolla=true");
      onmouseout=new Function("stopscrolla=false");
    }

    preTopa=0; currentTopa=0; stoptimea=0;

    function init_srolltext1(){
      article2.innerHTML="";
      article2.innerHTML+=article1.innerHTML;   
      article1.innerHTML=article2.innerHTML+article2.innerHTML;
      setInterval("scrollUp1()",1); //图片滚动速度
    }
    function scrollUp1(){
      if(stopscrolla==true) return;
      currentTopa+=1;
      if(currentTopa==81)//设置为图片高度稍大一些,防止出现多次滚动后留边
      {
       stoptimea+=1;
       currentTopa-=1;
       if(stoptimea==200) //暂停时间
       {
        currentTopa=0;
        stoptimea=0;
       }
      }
      else {  
       preTopa=article1.scrollTop;
       article1.scrollTop+=1;
       if(preTopa==article1.scrollTop){
         article1.scrollTop=article2.offsetHeight-articleHeight;
         article1.scrollTop+=1;
       }
      }

    }
    init_srolltext1();
    </script>

  • 相关阅读:
    Qt代码覆盖率code coverage(VS版)
    Qt下Doxygen使用
    QMultiMap使用
    Qt在VS(Visual Studio)中使用
    Qt语言家(Qt Linguist)更新翻译报错Qt5.9MinGW
    Qt Creator插件Todo
    QWidget一生,从创建到销毁事件流
    Qt排序
    QTcpSocketQt使用Tcp通讯实现服务端和客户端
    Qt Creator子目录项目类似VS解决方案
  • 原文地址:https://www.cnblogs.com/rooney/p/1610709.html
Copyright © 2011-2022 走看看