基于JQuery打造無縫滾動新聞步驟詳解_

1、基于JQuery打造無縫滾動新聞步驟詳解_ 本文實例講解并描述了基于JQuery打造無縫滾動新聞的方法。分享給大家供大家參考，具體如下： 首先，我們這里有這么一段html代碼，很簡潔，如下所示： ul li你說我是好人嗎，我是好人啊/li li哈哈，我真的不知道說什么了/li li生活就是應(yīng)當平淡的/li li像上學(xué)一樣的工作/li /ul /div 然后我們要做的就是使它無縫滾動。 首先我們引入進入JQuery，并且獵取到li元素列表中的第一個元素中的內(nèi)容 這里我們用法的是clone()方法來獵取，然后顯示其內(nèi)容： script type=text/javascript src=jquery

2、-1.3.2.min.js/script script type=text/javascript $(document).ready(function() $(#tag li).eq(0).click(function() alert($(this).clone().text(); /顯示的結(jié)果是“你說我是好人嗎，我是好人啊” 代表是第一個li元素的文本內(nèi)容 ); /script 然后就是顯示全部的li元素的列表內(nèi)容，這里我們利用parent()方法來獵取全部li元素的列表內(nèi)容： script type=text/javascript $(document).ready(function()

3、$(#tag li).eq(0).fadeOut(slow,function() /alert($(this).clone().text();/ 顯示的結(jié)果是“你說我是好人嗎，我是好人啊” 代表是第一個li元素的文本內(nèi)容 alert($(this).parent().text();/ 顯示的結(jié)果是四個li元素之間的內(nèi)容 ); /script 接下來要做的就是將獵取到的第一條li元素中的內(nèi)容追加到全部li元素列表內(nèi)容的后面： script type=text/javascript $(document).ready(function() $(#tag li).eq(0).fadeOut(slow

4、,function() /alert($(this).clone().text(); 顯示的結(jié)果是“你說我是好人嗎，我是好人啊” 代表是第一個li元素的文本內(nèi)容 /alert($(this).parent().text(); 顯示的結(jié)果是四個li元素之間的內(nèi)容 $(this).clone().appendTo($(this).parent(); /可以看到頁面中第一個li元素被自動添加到了第四個li元素的末尾 ); /script 接到上面，連續(xù)要做的就是讓第一個li元素給隱蔽掉，做法如下： script type=text/javascript $(document).ready(funct

5、ion() $(#tag li).eq(0).fadeOut(slow,function() /alert($(this).clone().text(); 顯示的結(jié)果是“你說我是好人嗎，我是好人啊” 代表是第一個li元素的文本內(nèi)容 /alert($(this).parent().text(); 顯示的結(jié)果是四個li元素之間的內(nèi)容 / alert($(this).clone().appendTo($(this).parent().text(); 可以看到頁面中第一個li元素被自動添加到了第四個li元素的末尾 $(this).clone().appendTo($(this).parent().fadeIn(slow); ); ); /script 最終利用setInterval(scroll_news(),1000);反復(fù)調(diào)用即可 最終完整代碼如下： script type=text/javascript function scrollNews() $(document).ready(function() $(#tag li).eq(0).fadeOut(slow,function() $(this).clone().appendTo($(this).parent().fadeIn(slow); $(this).remove();