Jquery实现简单的新闻列表滚动

Posted 2021-04-08 学士后35班

演示图

 

html代码

setInterval( )语法：setInterval ( code,millisec,lang ) ;

code[必须]：指定函数或是要执行的代码

millisec[必须]：执行代码所要等待的毫秒数

lang[可选]：脚本语言类型：JScript | VBScript | javascript

 

如图，执行setInterval( )会运行function里面的语句，并且是每隔50毫秒执行一次。

 

注意：此方法有一个返回值，是一个number类型的值，是对此方法的标识，可以作为参数传到clearInterval( )中用来清除对code部分的周期性执行。

animate( )语法：animate ( styles, speed, easing, callback ) ;

styles [必须]：规定产生动画效果的CSS样式和值

注意：CSS 样式使用 DOM 名称（比如 "marginTop"）来设置，而非 CSS 名称（比如 " margin-top "）

speed [可选]：规定动画的速度，默认”normal”，可以是毫秒值或者”slow” ”normal” ”fast”

easing [可选]：规定在不同的动画点中设置动画速度的 easing 函数

callback [可选]：animate 函数执行完之后，要执行的函数

 

appendTo ()语法：$(content). appendTo (selector);

content [必须]：规定要插入的内容 (可包含HTML标签)

selector [必须]：规定把内容追加到哪个元素上

 

如图，每隔50毫秒，ul列表的第一个li执行一次animate，其上外边距会减少1px，而变量marginTOP初始值为0，每次自减1，直到其负值与li高度相等，此li对象将调用appendTo ()方法，将此li追加插入到ul中的末尾，并且将其上外边距还原为0，重置变量marginTop为0。

 

滚动方法写好后，使用hover方法让鼠标悬停在列表上时停止，离开继续滚动。

hover ( )语法： hover ( inFunction,outFunction ) ;

inFunction [必须]：规定 mouseover 事件发生时运行的函数。

outFunction [可选]：规定 mouseout 事件发生时运行的函数。

 

注意：实现ul列表滚动播放时，要注意设置ul或者外层div的高度，使其最大高比里面li的总高度至少短一个li的高度，比如图中5个li总高100px，而ul只有80px，这样在滚动时下方不会出现空白，使效果更加平滑。