您的位置 首页 技术开发

网页内容连续滚动的代码

       一:上下连续滚动

 
<div id=rolllink style=overflow:hidden;height:170;width:100>
        <div id=rolllink1>要滚动的内容</div>
        <div id=rolllink2></div>
</div>
 
<script>
   var rollspeed=30
   rolllink2.innerHTML=rolllink1.innerHTML //克隆rolllink1为rolllink2
   function Marquee()
   {
   if(rolllink2.offsetTop-rolllink.scrollTop<=0) //当滚动至rolllink1与rolllink2交界时
          rolllink.scrollTop-=rolllink1.offsetHeight //rolllink跳到最顶端
   else
              rolllink.scrollTop++
   }
   var MyMar=setInterval(Marquee,rollspeed) //设置定时器
   rolllink.onmouseover=function()
{clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的
   rolllink.onmouseout=function()
{MyMar=setInterval(Marquee,rollspeed)}//鼠标移开时重设定时器
</script>

       二:左右连续滚动
 
<div id=demo3 style=overflow:hidden;height:100;width:710;>
   <table width="710" border=0 align="center" cellpadding=0 cellspacing="3" cellspace=0>
       <tr>
                     <td nowrap id=demo4>要滚动的内容</td>
                     <td nowrap id=demo5></td>
       </tr>
    </table>
</div>
 
<script>
       var speed=10
       demo5.innerHTML=demo4.innerHTML
       function Marquee()
{
              if(demo5.offsetWidth-demo3.scrollLeft<=0)
                     demo3.scrollLeft-=demo4.offsetWidth
              else
{
                     demo3.scrollLeft++
                     }
        }
              var MyMar=setInterval(Marquee,speed)
              demo3.onmouseover=function()
    {clearInterval(MyMar)}
              demo3.onmouseout=function()
{MyMar=setInterval(Marquee,speed)}
</script>
 
       三.时滚时停的代码
<div id="icefable1">要滚动的内容</div>
<script language="JavaScript" type="text/javascript">
marqueesHeight=100;
stopscroll=false;
with(icefable1)
{
      style.height=marqueesHeight;
      style.overflowX="visible";
      style.overflowY="hidden";
      noWrap=true;
      onmouseover=new Function("stopscroll=true");
      onmouseout=new Function("stopscroll=false");
}
preTop=0; currentTop=marqueesHeight; stoptime=0;
icefable1.innerHTML += icefable1.innerHTML;
 
function init_srolltext() {
 icefable1.scrollTop=0;
 setInterval("scrollUp()",15);
}
 
function scrollUp() {
 if(stopscroll==true) return;
 currentTop+=1;
 if(currentTop>marqueesHeight)
 {
    stoptime+=1;
    currentTop-=1;
    if(stoptime==400)
    {
        currentTop=0;
        stoptime=0;
    }
 }
 else {
      preTop=icefable1.scrollTop;
      icefable1.scrollTop+=1;
     
      if(preTop==icefable1.scrollTop)
      {
        icefable1.scrollTop=0;
        icefable1.scrollTop+=1;
      }
 }
}
init_srolltext();
</script>

免责声明:本文由静落凝封整理发布,版权归原作者所有,转载请注明出处,如有侵权请联系管理员删除

热门文章

腾讯元宝派电脑版上线,打造高效AI协作空间

腾讯元宝派电脑版上线,打造高效AI协作空间

3月25日 腾讯宣布,旗下AI原生应用元宝,正式推出“元宝派”电脑版。在电脑端的大屏环境中,用户可以边参与共享屏幕,边在单独窗口与派友或元宝聊天互动。同时,元宝派电脑版还支持多端消息...

什么是AI Agent?AI Agent(智能体) 的原理是什么?

什么是AI Agent?AI Agent(智能体) 的原理是什么?

AI Agent(人工智能代理) 是一个能够感知环境、进行决策并执行行动,以达成特定目标的智能软件实体,它不仅仅是回答问题的聊天机器人,更是能够动手做事的智能执行者。...

国内爬虫工具与OpenClaw功能有何区别?

国内爬虫工具与OpenClaw功能有何区别?

OpenClaw不是网络爬虫工具,而是一个AI智能体/个人助理平台。它与传统爬虫软件有本质区别。...

openclaw是什么,国内有哪些类openclaw工具?

openclaw是什么,国内有哪些类openclaw工具?

OpenClaw是一个AI智能体/个人助理平台,。它本质上是一个"AI Agent 网关 + 多平台聊天入口",可以将WhatsApp、Telegram、Discord、iMessage等常见聊天工具桥接到各种大模型和工具链...

什么是GEO?如何进行GEO优化?GEO优化有哪些方法?

什么是GEO?如何进行GEO优化?GEO优化有哪些方法?

GEO(Generative Engine Optimization)是针对生成式人工智能引擎(如ChatGPT、DeepSeek、豆包等AI问答工具)的优化技术体系,旨在通过技术适配与内容重构,提升品牌或产品在AI生成答案中的...