现在的位置: 首页 > 综合 > 正文

垂直滚动的DIV(含鼠标事件)

2012年12月18日 ⁄ 综合 ⁄ 共 1799字 ⁄ 字号 评论关闭

<Script language="Javascript">
<!--
 marqueesHeight=20;                                                    //内容区高度
 stopscroll=false;                                                           //这个变量控制是否停止滚动
 
 with(marquees){
  noWrap=true;                                                             //这句表内容区不自动换行
  style.width=0;                                                             //于是我们可以将它的宽度设为0,因为它会被撑大
  style.height=marqueesHeight;
  style.overflowY="hidden";                                          //滚动条不可见
  onmouseover=new Function("stopscroll=true");          //鼠标经过,停止滚动
  onmouseout=new Function("stopscroll=false");           //鼠标离开,开始滚动
 }
 
 
 document.write('<div id="templayer" style="background-color:#123;position:absolute;z-index:1;visibility:hidden"></div>');
                  //这时候,内容区的高度是无法读取了。下面输出一个不可见的层"templayer",稍后将内容复制到里面
 
 
 <!-- 初始化滚动内容 -->
 function init(){
  
  while(templayer.offsetHeight < marqueesHeight){     //多次复制原内容到"templayer",直到"templayer"的高度大于内容区高度
   templayer.innerHTML+=marquees.innerHTML;
  }

  marquees.innerHTML=templayer.innerHTML + templayer.innerHTML;  //把"templayer"的内容的“两倍”复制回原内容区
  
  setInterval("scrollUp()",100);         //设置连续超时,调用"scrollUp()"函数驱动滚动条
 }
 
 document.body.onload=init;
 preTop=0;               //这个变量用于判断滚动条是否已经到了尽头

 <!-- 滚动条的驱动函数 -->
 function scrollUp(){
  if(stopscroll==true)
   return;                                                //如果变量"stopscroll"为真,则停止滚动
  preTop=marquees.scrollTop;              //记录滚动前的滚动条位置
  marquees.scrollTop+=1;                     //滚动条向下移动一个像素
                                                            //如果滚动条不动了,则向上滚动到和当前画面一样的位置
                                                            //当然不仅如此,同样还要向下滚动一个像素(+1):
  
  if(preTop==marquees.scrollTop){
   marquees.scrollTop=templayer.offsetHeight - marqueesHeight+1;
  }
 }
-->
</script>

抱歉!评论已关闭.