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>

  • 相关阅读:
    docker 常用命令
    linux 查看服务器序列号
    centos 7 lsof 安装使用
    Jenkins +svn +maven +tomcat+ ansible 自动化批量部署
    nginx 部署前期一定要关闭selinux
    yum 执行不了, 解决方法
    IIS发布网站
    使用TreeView 使用多选功能
    C#类和接口
    关于C#垃圾回收
  • 原文地址:https://www.cnblogs.com/rooney/p/1610709.html
Copyright © 2011-2022 走看看