按钮控制多组文字翻页滚动效果

7个月前 (05-06 16:26)阅读回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值5294
  • 级别管理员
  • 主题1058
  • 回复2
楼主

通过按钮来控制文字滚动显示效果,用户鼠标点击按钮后自动滚动到下一组文字显示,根据自己的需求来自定义即可。

<head>
<style type="text/css">
#div1_wwwwumingren {FLOAT:left; OVERFLOW:hidden; WIDTH:100%; HEIGHT:28px}
#div1_wwwwumingren UL {OVERFLOW:hidden; LIST-STYLE-TYPE:none; HEIGHT:28px;margin:0px;padding:0px;}
#div1_wwwwumingren LI {DISPLAY:inline;margin:0px;padding:0px;}
#div1_wwwwumingren LI A {FLOAT:left; margin-top:1px; margin-left:5px; TEXT-DECORATION: none} 
#div2_wwwwumingren {FLOAT:left; OVERFLOW:hidden; WIDTH:100%; HEIGHT:28px}
#div2_wwwwumingren UL {OVERFLOW:hidden; LIST-STYLE-TYPE:none; HEIGHT:28px;margin:0px;padding:0px;}
#div2_wwwwumingren LI {DISPLAY:inline;margin:0px;padding:0px;}
#div2_wwwwumingren LI A {FLOAT:left; margin-top:1px; margin-left:5px; TEXT-DECORATION: none} 
.handle{cursor:hand;}
</style>
</head> 
<a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<TABLE  id=NAV cellSpacing=0 cellPadding=0 width="100%" border=0 >
<TBODY>
<TR>
 <TD noWrap>
  <DIV id=div1_wwwwumingren>
   <TABLE  id=menu_tb cellSpacing=0 cellPadding=0 border=0>
   <TBODY>
   <TR ><TD>
    <UL>
     <LI><A href="https://www.wuming.ren"class="index_small_titile">武鸣人一号 |</A></LI>
     <LI><A href="https://www.wuming.ren"class="index_small_titile">武鸣人二号 |</A></LI>
     <LI><A href="https://www.wuming.ren"class="index_small_titile">武鸣人三号</A></LI>
    </UL>
   </TD></TR>
   <TR><TD>
    <UL>
     <LI><A href="https://www.wuming.ren">武鸣人四号 |</A></LI>
     <LI><A href="https://www.wuming.ren">武鸣人五号 |</A></LI>
     <LI><A href="https://www.wuming.ren">武鸣人六号</A></LI>
    </UL>
   </TD></TR>
   <TR ><TD>
    <UL>
     <LI><A href="https://www.wuming.ren">武鸣人七号 |</A></LI>
     <LI><A href="https://www.wuming.ren" title="车船使用税收清查">武鸣人八号 |</A></LI>
     <LI><A href="https://www.wuming.ren">武鸣人九号</A></LI>
    </UL>
   </TD></TR>
   </TBODY>
   </TABLE>
  </DIV>
 </TD>
   
 <TD >
 <IMG id="NavRight" onClick="marquee_wuming_ren('NAV','div1_wwwwumingren','menu_tb','NavRight')" title="显示下一行菜单" class="handle" src="/img/20240506_www_wuming_ren_1.gif" align="absMiddle" />
 </TD>
</TR>
</TBODY>
</TABLE> 
<!---->
<TABLE  id=NAV1 cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY >
<TR>
 <TD noWrap>
  <DIV id=div2_wwwwumingren>
  <TABLE  id=menu_tb1 cellSpacing=0 cellPadding=0 border=0>
        <TBODY>
   <TR ><TD>
    <UL>
     <LI><A href="https://www.wuming.ren"class="index_small_titile">武鸣人一号 |</A></LI>
     <LI><A href="https://www.wuming.ren"class="index_small_titile">武鸣人二号 |</A></LI>
     <LI><A href="https://www.wuming.ren"class="index_small_titile">武鸣人三号</A></LI>
    </UL>
   </TD></TR>
   <TR><TD>
    <UL>
     <LI><A href="https://www.wuming.ren">武鸣人四号 |</A></LI>
     <LI><A href="https://www.wuming.ren">武鸣人五号 |</A></LI>
     <LI><A href="https://www.wuming.ren">武鸣人六号</A></LI>
    </UL>
   </TD></TR>
   <TR ><TD>
    <UL>
     <LI><A href="https://www.wuming.ren">武鸣人七号 |</A></LI>
     <LI><A href="https://www.wuming.ren" title="车船使用税收清查">武鸣人八号 |</A></LI>
     <LI><A href="https://www.wuming.ren">武鸣人九号</A></LI>
    </UL>
   </TD></TR>
  </TBODY>
  </TABLE>
  </DIV>
 </TD>
   
 <TD >
 <IMG id="wwwwumingren" onClick="marquee_wuming_ren('NAV1','div2_wwwwumingren','menu_tb1','wwwwumingren')" title="显示下一行菜单" class="handle" src="/img/20240506_www_wuming_ren_1.gif" align="absMiddle" />
 </TD>
  </TR>
  </TBODY></TABLE>
<SCRIPT>
function marquee_wuming_ren(NAV,div1_wwwwumingren,menu_tb,NavRight)
{//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
   var t,p=true,movepixel=1;
   var tb=document.getElementById(NAV);
   var o=document.getElementById(div1_wwwwumingren);
   var m=document.getElementById(menu_tb);
   var r=document.getElementById(NavRight);
   var lineHeight = o.scrollHeight/m.rows.length; 
   if(m.rows.length>1)
   {//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
      tb.onmouseover=function(){r.style.display="";}
      tb.onmouseout =function(){r.style.display="";}
      r.onmouseover=function(){r.src="/img/20240506_www_wuming_ren_1.gif";}
      r.onmouseout =function(){r.src="/img/20240506_www_wuming_ren_1.gif";}
      p=false;
   }
   r.onclick=function(){if(p) return; movepixel=1; t=setInterval(scroll_up,10); p=true;}
  //document.body.onmousewheel=function(){if(p) return; if(event.wheelDelta>0) movepixel=-1; else movepixel=1; t=setInterval(scroll_up,10); p=true;}
   function scroll_up()
   {//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
   o.scrollTop+=movepixel;
      if(movepixel>0)
      {
         if(o.scrollTop % (lineHeight) == lineHeight-1)
         {
            clearInterval(t);
            p=false;
         }
         if(o.scrollTop>=lineHeight*(m.rows.length-1))
         {
            clearInterval(t);
            o.scrollTop=0;
            p=false;
         }
      }
      else
      {
         if(o.scrollTop % (lineHeight) == 1)
         {
            clearInterval(t);
            p=false;
         }
         if(o.scrollTop-1<0)
         {
            clearInterval(t);
            o.scrollTop=lineHeight*(m.rows.length-1);
            p=false;
         }
      }
   }
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
</SCRIPT>


0
0
收藏0

本文来自武鸣人网站,转载请注明出处

本文地址:https://www.wuming.ren/a/891.html

回帖

按钮控制多组文字翻页滚动效果 期待您的回复!

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息