历史上最简单的连续滚动字幕源代码,js控制(除了js还有啥可以控制的呢。哈哈)

在网上找了一下连续字幕滚动的源代码,就是搞不懂了,这么简单的东西非要来回的捣鼓,最后经过我的一番alert()终于搞明白了,下面我把代码贴出来大家分享一下,

  1. < div   id = ami   style = overflow :hidden;height:20px;width:150 >  
  2.      < div   id = ami1 >
  3. 我是打头的 < br >
  4. 我向上运动 < br >
  5. 我向上运动 < br >
  6. 我向上运动 < br >
  7. 我向上运动 < br >
  8. 我向上运动 < br >
  9.      </ div >
  10.      < div   id = ami2   > </ div >
  11. </ div >
  12. < script >
  13. var  speed = 30 ;
  14. ami2.innerHTML = ami1 .innerHTML
  15. function Marquee()
  16. {
  17.     //if(ami2.offsetTop-ami.scrollTop < =0)//注释掉的是网上的源代码,这句代码有个缺点就是当 ami2.offsetTop(是 ami2 相对于ami的距离)大于 ami.scrollTop 时那么滚动条滚几下就再也不会动了
  18.     //  { ami.scrollTop- =(ami1.offsetHeight-1); //注释掉的是网上的源代码 ,ami1.offsetHeight(包括边框的高度)
  19.     //} //注释掉的是网上的源代码
  20.     //else //注释掉的是网上的源代码
  21.         //{ //注释掉的是网上的源代码
  22. var  temp = ami .scrollTop;//为啥要把 ami .scrollTop,暂存起来呢原因是 ami .scrollTop增加到一定的数值,就不会动了,就像我们的网页的滚动条,你拉到底就再也拉不下去了一样,所以要暂存起来,等 ami .scrollTop再也加不动的时候就把他置零,这样就可以又重新滚起来了,
  23. ami.scrollTop++;
  24. if( temp ==ami.scrollTop)
  25. {
  26.      ami.scrollTop = 1 ;
  27. }
  28.         //} //注释掉的是网上的源代码
  29. }
  30. var  MyMar = setInterval (Marquee,speed)
  31. ami.onmouseover = function () {clearInterval(MyMar)}
  32. ami.onmouseout = function () { MyMar = setInterval (Marquee,speed)}
  33. </ script >

顺便把

scrollHeight,clientHeight,scrollTop区别和关系做一下笔记

这是《让一行页脚保持在底部》的注释,效果可以点此

function test(){
var infoHeight = document.getElementById("info").scrollHeight;
//scrollHeight 为层实际的高度,有实际有多高就多高,与当前网页高度无关。
var bottomHeight = document.getElementById("bottom").scrollHeight;
var allHeight = document.documentElement.clientHeight;
//clientHeight 为层在当前屏幕的高度,非该层的实际高度
  
var bottom = document.getElementById("bottom");
//获取bottom
if((infoHeight + bottomHeight) < allHeight){ //如果"info层的高度"加"bottom层的高度"小于"当前屏幕的高度"
  bottom.style.position = "absolute"; //定义bottom的position为absolute
  bottom.style.bottom = "0"; //bottom属性设为0.
}else{
  bottom.style.position = "";
  bottom.style.bottom = "";
}  
setTimeout(function(){test();},10); //当内容减少,窗口缩小,依然保持在底部
}
test();
《右下角广告代码-已测-支持FIREFOX IE7 IE6》的注释,效果可以点此

//<div style="position:absolute;border:1px solid #000;right:0;height:20px;" id="ad"><a href="http://www.zishu.cn ">子鼠测试.</a></div> <!--定义需要测试的层的css。position:absolute;是关键-->
function rightBottomAd(){
    var abc = document.getElementById("ad"); //获取ad的值并赋给变量abc
    abc.style.top = document.documentElement.scrollTop+document.documentElement.clientHeight-20+"px";
    // document.documentElement.scrollTop 是获取当前页面的滚动条纵坐标位置,注意不是document.top.scrollTop
    // document.documentElement.clientHeight 获取屏幕的实际大小
    // 整句就是"滚动条纵坐标"加"当前屏幕的坐标"减"20"(20对应上面的层的高度),这样就是可以让层永远处于当前页面的最下端。可以通过 alert(document.documentElement.scrollTop)和 alert(document.documentElement.clientHeight)加深理解。
    setTimeout(function(){rightBottomAd();},50); //不断的计算层的位置。
}
rightBottomAd();

下面是一张相关的图片

历史上最简单的连续滚动字幕源代码,js控制(除了js还有啥可以控制的呢。哈哈)_第1张图片

你可能感兴趣的:(function,css,测试,IE,firefox)