无缝滚动代码四例

实例一:无缝滚动代码,完全兼容IE, FF, Opera
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


实例二:无缝滚动,鼠标放上暂停
内容的offsetHeight小于容器的高度时,scrollTop就没有用,多复制几遍或多加几空行就可以了。
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


实例三:跑马灯 文字一行一行地向上滚动
让项目列表<li>中的文字一行一行地向上滚动:
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

关键代码分析
引用内容 引用内容
<div id="limrq" style="overflow:hidden;height:20px;line-height:22px;"></div>


overflow:hidden;隐藏超出高度20px的部分.
height:20px;容器高度.
line-height:22px;固定行高.

引用内容 引用内容

<script type="text/javascript">
var mrqInterval=new Object;
var mrqn;
var limrq=document.getElementById("limrq");
var lml=limrq.getElementsByTagName("li").length;
function liMarquee(){
    limrq.scrollTop++;
    if(limrq.scrollTop%22==0){
        clearInterval(mrqInterval[0]);
        }
    }
function nxtmrq(){
    if(mrqn<lml){
        mrqInterval[0]=window.setInterval("liMarquee()",20);
        mrqn++;
        }
    else{
        limrq.scrollTop=0;
        mrqn=0;
        nxtmrq();
        }
    }
function intimrq(){
    limrq.scrollTop=0;
    mrqn=0;
    mrqInterval[1]="";
    clearInterval(mrqInterval[1]);
    mrqInterval[1]=window.setInterval("nxtmrq()",2000);
    }
limrq.innerHTML+="<li>"+limrq.getElementsByTagName("li")[0].innerHTML+"</li>";
limrq.onmouseover=function(){
    clearInterval(mrqInterval[1]);
    }
limrq.onmouseout=function(){
    mrqInterval[1]=window.setInterval("nxtmrq()",2000);
    }
window.onload=intimrq;
</script>

var lml=limrq.getElementsByTagName("li").length;//先读取项目数量.
limrq.innerHTML+="<li>"+limrq.getElementsByTagName("li")[0].innerHTML+"</li>";//把第一个项目追加到容器里作为环接点.
作者:Cary

广告位 文章来自: 网络
引用通告: 查看所有引用 | 我要引用此文章
Tags:
评论: 0 | 引用: 0 | 查看次数: 390
发表评论
你没有权限发表留言!
广告