建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!
当前位置:建站学习网 > DIV+CSS教程 > DIV CSS教程 >

连续循环向上滚动代码

整理编辑:建站学习网 更新时间:2017-01-08 阅读:0

<div align="center" id="demo" style="overflow:hidden;height:200px;width:250px;border:1px solid #6699cc;font-size:14px;color:#336699;line-height:22px;text-align:left;padding:10px">
    <div id="demo1">
        无缝隙向上滚动,兼容IE和FF<br />
  建站学习网<br />
  网址:http://www.dedexuexi.com<br />
        专注织梦学习
    </div>
    <div id="demo2"></div>
</div>
<script language="javascript" type="text/javascript">
<!--
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var speed=30;    //滚动速度值,值越大速度越慢
var nnn=200/demo1.offsetHeight;
for(i=0;i<nnn;i++){demo1.innerHTML+="<br />"+ demo1.innerHTML}
demo2.innerHTML = demo1.innerHTML    //克隆demo2为demo1
function Marquee(){
    if(demo2.offsetTop-demo.scrollTop<=0)    //当滚动至demo1与demo2交界时
        demo.scrollTop-=demo1.offsetHeight    //demo跳到最顶端
    else{
        demo.scrollTop++     //如果是横向的 将 所有的 height top 改成 width left
    }
}
var MyMar = setInterval(Marquee,speed);        //设置定时器
demo.onmouseover = function(){clearInterval(MyMar)}    //鼠标经过时清除定时器达到滚动停止的目的
demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)}    //鼠标移开时重设定时器
-->
</script>

转载请注明出处:https://www.dedexuexi.com/divcss/jc/2333.html

关键词:技巧