零基础建站培训教程介绍

当前位置:

文字向上无限循环滚动代码

在自己做网站时,为了节省版面,往往需要在某个版块使用向上无限循环滚动来展示内容。怎么样写这样的文字向上无限循环滚动代码呢?下面学做网站论坛分享一下文字向上无限循环滚动代码,可以直接拿去用于建网站时实现文字循环展示。

文字向上无限循环滚动效果

以下是实现文字向上无限循环滚动效果代码:

CSS样式代码:


<style>
*{margin:0;padding:0}
ul,ol,li{list-style:none;}
#colee{overflow:hidden;height:60px;width:100%;float: left;}
#incolee{height:800%;width:100%;float: left;}
#colee1,#colee2{float:left;}
#colee1 li{float:left;}
</style>

HTML内容代码:


<div id="colee">
     <div id="incolee">
    <div id="colee1">
    <ul>
    <li>向上不间断无缝滚动图片的效果(兼容火狐和IE)</li>
    <li>向上不间断无缝滚动图片的效果(兼容火狐和IE)</li>
    <li>向上不间断无缝滚动图片的效果(兼容火狐和IE)</li>
    <li>向上不间断无缝滚动图片的效果(兼容火狐和IE)</li>
    <li>向上不间断无缝滚动图片的效果(兼容火狐和IE)</li>
    <li>向上不间断无缝滚动图片的效果(兼容火狐和IE)</li>
    <li>向上不间断无缝滚动图片的效果(兼容火狐和IE)</li>
    <li>向上不间断无缝滚动图片的效果(兼容火狐和IE)</li>
    </ul>
  </div>
    <div id="colee2"></div>
</div>
</div>

JS控制代码:


<script>
//代码来源:学做网站论坛 https://www.xuewangzhan.net
var speed1=30;
var colee2=document.getElementById("colee2");
var colee1=document.getElementById("colee1");
var colee=document.getElementById("colee");
colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2
function Marquee1(){
    //当滚动至colee1与colee2交界时
    if(colee2.offsetTop-colee.scrollTop<=0){
    colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端
    }else{
    colee.scrollTop++
    }
}
var MyMar1=setInterval(Marquee1,speed1)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
colee.onmouseover=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed1)}
</script>
<!--向上滚动代码结束-->

通过以上三段代码就可以实现网站上文字向上无限循环滚动的效果。

发表评论

电子邮件地址不会被公开。 必填项已用*标注