思洋互动网站建设学前班

列表项的滚动
现在，众多网站中采用一种可以垂直滚动的新闻列表，每一个列表项都作为一个新闻标题。让静态的列表滚动起来可以加强页面的动感效果，列表项的滚动一般适用于实时更新的网站内容标题。本节就来探讨如何让静态列表滚动起来，出现滚动新闻的效果。静态页面如图4.5所示。
使用jQuery产生滚动列表的原理是：利用隐藏与添加这两个动作。即首先需要取得列表的滚动区间，然后获取滚动内容的第一列表项并隐藏第一列表项，将隐藏的第一列表项添加到整个列表结尾。
其中，使用到了jQuery的hover()、find()、height()、animate()、appendTo()、trigger()函数，以及：first属性、mouseleave事件和JavaScript的clearInterval()、setInterval()函数，如表4.1所示。
（1）jQuery的animate()函数--自定义动画
该函数负责创建自定义动画。其语法形式如下：

1. 语法形式一   animate(params,option)  
2. 语法形式二   animate(params,[duration],[easing],[fn])  

注：语法形式一中，第一个参数含义同语法形式一，第二个参数表示一组包含动画选项的值的集合。语法形式二后面三个参数可省，依次表达的意义为：一组包含作为动画属性和终值的样式属性及其值的集合；三种预定速度之一的字符串（"slow"、"normal"or "fast"）或表示动画时长的毫秒数值（如1000）；要使用的擦除效果的名称（需要插件支持），jQuery默认提供"linear"和"swing"；在动画完成时执行的函数。
表4.1  列表项的滚动所用到的函数

名    称	功    能		语    法	说    明
jQuery函数
hover()	自定义方法，模仿鼠标的悬停与移出事件		hover(over,out)	参数中over表示鼠标的悬停事件处理函数，out表示鼠标的移出事件处理  函数
find()	搜索所有与指定表达式匹配的元素		find(expr)	参数expr表示用于查找的表达式，这个函数是用于找出正在处理的元素的后代元素的适宜方法
height()	取得或设置正在处理的元素的高度		语法形式一：height() 语法形式二：height(val)	无参函数表示取得元素高度，有参函数表示设置元素高度，默认单位为像素
appendTo()	把所有匹配的元素加入到另一个指定的元素集合中		appendTo(content)	参数content表示指定的元素集合
trigger()	在每一个匹配的元素上触发指定的事件		trigger(type,[data])	该函数即可以触发固有事件也可以触发自定义事件。参数type表示事件对象或者触发的事件类型，data表示传递给事件处理函数的附加参数，以数组形式存在
mouseleave	代替原有的JavaScript的onmouseout事件，但是修正了其中的一些错误		mouseleave(fn)	此事件不会像onmouseout事件一样，在不同的子元素间移动并不会触发它。参数fn表示事件处理函数
JavaScript函数
clearInterval()	取消周期方法调用	clearInterval(val)		参数val是函数setInterval返回的一个timer ID

（2）jQuery的属性：first--获取第一个子元素
该属性获取当前匹配元素的第一个子元素。其语法形式如下：

1. Selector:first 

（3）JavaScript函数setInterval()--设定一定时间间隔调用函数
该函数将不停地按照指定的周期调用函数或者表达式，直到窗口关闭或者调用了clearInterval()函数。其语法形式如下：

1. setInterval(fn,millsecond) 

注：参数fn表示被调用的函数或者表达式，参数millsecond表示毫秒值。
1．功能实现
实现列表项滚动的步骤如下。
（1）取得整个列表的滚动区间。
（2）使用jQuery的hover()函数分别响应鼠标的悬停与离开事件。
（3）在鼠标的悬停时间中获取滚动内容的第一列表项并隐藏第一列表项，将隐藏的第一列表项添加到整个列表结尾。
（4）设定滚动间隔，以及滚动过程中动画持续时间。
首先，加入CSS样式定义：

1. 1<style type="text/CSS">
2. 2    ul.scrollline{height:90px;}  
3. 3</style>

然后，把jQuery库引入进来：

1. <script src="jslib/jquery-1.6.min.js" type="text/JavaScript"></script>

最后，添加完整代码如下：

1. 1<script language="JavaScript">
2. 2    $(function(){  
3. 3           var area=$('ul.scrollline');    //取得滚动区域  
4. 4           var timespan=1000;              //定义滚动时间间隔  
5. 5           var timeID;                     //需要清除的动画  
6. 6           area.hover(function(){          //自定义鼠标悬停与移出事件处理  
7. 7               clearInterval(timeID);        
8.                                 //当鼠标在滚动区域中时，停止滚动，移出事件处理  
9. 8               },function(){   //鼠标悬停事件处理  
10. 9                   timeID=setInterval(function(){  
11.                                 //设置滚动时间间隔及滚动动作  
12. 10                  var moveline=area.find('li:first');   
13.                                 //最先需要获取列表当前的第一行，这个位置很重要  
14. 11                  var lineheight=moveline.height();   //取得每次滚动高度  
15.                                 //通过取负margin值，隐藏第一行  
16. 12                  moveline.animate({marginTop:-lineheight+'px'},500,  
17.                     function(){       
18.                 //隐藏后，将该行的margin值置零，并添加到列表尾部，实现循环滚动  
19. 13                  moveline.CSS('marginTop',0).appendTo(area);       
20. 14              })  
21. 15          },timespan)         //滚动间隔时间取决于timespan  
22. 16          }).trigger('mouseleave');     
23.                                 //函数载入时，模拟执行mouseleave，即自动滚动  
24. 17    });  
25. 18</script>

因为这种特效属于动态形式，所以这里不给出效果图片，请读者自行测试。