您的位置 首页 网站建设

网页内容连续滚动的代码

       一:上下连续滚动

 
<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>

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

热门文章

Linux中升级更新命令yum update和yum upgrade的区别

Linux中升级更新命令yum update和yum upgrade的区别

Linux中升级更新命令yum update和yum upgrade的区别,yum -y update:升级所有包同时也升级软件和系统内核;yum -y upgrade:只升级所有包,不升级软件和系统内核。...

网页中文简体繁体转换JS代码

网页中文简体繁体转换JS代码

要在网页上实现中文简体和繁体之间的转换,可以使用JavaScript库,以下是我在网络上收集整理的网页中文简体繁体转换JS代码,供收藏,以备用。代码有点多,就不直接贴代码了,自行下载测试哈...

通过脚本文件自动更新Linux实例中的软件源

通过脚本文件自动更新Linux实例中的软件源

本文主要介绍通过脚本文件更新Linux实例中的软件源的方法。如果您对实例或数据有修改、变更等风险操作,务必注意实例的容灾、容错能力,确保数据安全。如果您对实例等进行配置与数据修改,建...

在CentOS系统的ECS实例中配置OpenVPN

在CentOS系统的ECS实例中配置OpenVPN

在安装OpenVPN服务前,请确保完成如下准备工作。请参考如下文档,将YUM源更新为阿里云的YUM源。如何通过工具自动更新Linux实例中的软件源。依次执行如下命令,安装依赖的软件包。yum instal...

Linux 自动注销设置 TMOUT

Linux 自动注销设置 TMOUT

对所有用户设置自动注销功能:首先,以root用户登录系统,输入 vi /etc/profile 命令,编辑profile文件。查找TMOUT,若没有,则可以在文件最后添加如下语句:TMOUT=300 export TOMOUT 如果查...