利用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(p_w_picpaths/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>