jQuery学习之 控制列表项符号图片 及 列表项滚动
利用jQuery与CSS控制列表项符号图片
原理：利用jQuery为每个列表项动态加载CSS样式背景图片，并隐藏原有的列表项标号。用到了jQuery的addClass()函数。
addClass(class|fn) #该函数为每个匹配的元素添加指定的类名，class表示一个或多个要添加的类名，类名间用空格分隔。
例：
<script type="text/javascript">
$(document).ready(
function(){
$("#ulstyle li").each(
function(){
$(this).addClass("list"); #为li添加样式类“list”
}
);
}
);
</script>
<style type="text/css">
#ulstyle {list-style:none;} #取消原有的列表项符号
.list { background:url(images/listicon.jpg) no-repeat; #设定背景图片样式
padding-left:20px;
}
</style>
列表项的滚动
原理：利用隐藏与添加这两个动作。即首先取得列表的滚动区间，然后取得滚动内容的第一列表项，将隐藏的第一列表项添加到整个列表结尾。
1. hover(over,out) #over鼠标悬停事件处理函数，out
2. setInterval()和clearInterval()是DOM Window对象的两个方法,setInterval()方法会不停地调用函数，知道clearInterval()被调用或窗口被关闭。由setInterval()返回的ID值可用作clearInterval()方法的参数。
3. find()方法获得当前元素集合中每个元素的后代，通过选择器、jQuery对象或元素来筛选。
语法：.find(selector) #selector，字符串值，包含提供匹配当前元素集合的选择器表达式
4. animate()方法执行CSS属性集的自定义动画
语法：$(selector).animate(styles,speed,easing,callback) #styles,必须。Speed，速度，可选。Callback，可选，animate函数执行完之后，要执行的函数。
语法：setInterval(code,millisec)
例：
<script type="text/javascript">
$(function(){
var area = $('ul.scrollline'); #取得滚动区域
var timespan = 1000;<!--定义滚动时间间隔-->
var timeID; #定义滚动时间间隔
area.hover(function(){
clearInterval(timeID); #当鼠标在滚动区域中时，停止移动
},
function(){ #鼠标悬停事件处理
timeID = setInterval( #设置滚动时间间隔及滚动动作
function(){
var moveline = area.find('li:first'); #获取列表当前的第一行
var lineheight = moveline.height(); #取得每次滚动的高度
moveline.animate({marginTop:-lineheight+'px'},500,function(){moveline.css('marginTop',0).appendTo(area);})
#通过取负margin值，隐藏第一行；隐藏后，将改行的margin值置为0，并添加到列表尾部，实现循环滚动（即callback参数）
},timespan)<!--end of setInterval-->
}).trigger('mouseleave'); /*当函数载入时，模拟执行mouseleave,即自动滚动*/<!--end of hover-->
});
</script>
HTML代码：
<body>
<h2>多行应用</h2>
<ul class="scrollline">
<li>jQuery 是一个 JavaScript 库。</li>
<li>jQuery 极大地简化了 JavaScript 编程。</li>
<li>jQuery 很容易学习。</li>
<li>jQuery 拥有供 AJAX 开发的丰富函数（方法）库。</li>
</ul>
</body>