2018-03-25 marquee JQ控制方法

HTML部分:

定义一个相同的父元素top_banner,里边包含两个子元素 dome1和dome2

dome1里设置<ul>       <li> marquee的内容样式或者图片</li>......       </ul>                             

dome2为空的div

css部分:

给定父元素的宽和高overflow:hidden，   给定dome1里 li的宽和高    dome2没有样式

JS部分:      

声明这个跑马灯的速度  speed=50;

接下来需要定义这个函数   function     Marquee(){ 

    if(dome2.offsetTop-top_banner.scrollTop<=0){    top_banner.scrollTop  -=  dome1.offsetHeight;     }

   else{   top_banner.scrollTop++ ;  }

 }

var  myMar=setInterval(Marquee,speed);

top_banner.οnmοuseοver=function(){ clearInterval(myMar) };

top_banner.οnmοuseοut=function(){ myMar=setInterval(Marquee,speed) };

用到的知识点:       .offsetTop             .scrollTop          .offsetHeight       setInterval      clearInterval   

1  .offsetTop  该方法       返回或设置匹配元素相对于文档的偏移(位置)。

2  .scrollTop     该方法        返回不加()   或    设置匹配元素的滚动条的垂直位置。  设置需要在后边加 (值)

3  .offsetHeight       offsetHeight与offsetWidth作用相同，前者是获取元素的高度后者则是宽度．offsetHeight属性可以获取元素的可见高度值

4  setInterval    该方法   可以按照指定的周期(时间，毫秒计算)来不停的调用某个函数或者计算表达式

直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

5  clearInterval     该方法     可取消由 setInterval() 设置的 timeout     参数必须是由 setInterval() 返回的 ID 值。