Detailed steps for creating seamless rolling news Based on JQuery: jquery rolling news

Detailed steps for creating seamless rolling news Based on JQuery: jquery rolling news

This article describes how to create seamless rolling news Based on JQuery. We will share this with you for your reference. The details are as follows:

First, we have such an html code, which is very concise, as shown below:

<Ul> <li> do you think I am a good person? I am a good person </li> <li> Haha, I really don't know what to say. </li> <li> life should be plain. </li> <li> Work like attending school </li> </ul> </div>

What we need to do is to make it scroll seamlessly.

First, we introduce JQuery and obtain the content of the first element in the li element list.

Here we use the clone () method to obtain and display its content:

<Script type = "text/javascript" src = "jquery-1.3.2.min.js"> </script> <script type = "text/javascript"> $ (document ). ready (function () {$ ('# tag li '). eq (0 ). click (function () {alert ($ (this ). clone (). text (); // The displayed result is "Do you say I am a good person, I am a good person", representing the text content of the first li element}); </script>

Then, the list content of all li elements is displayed. Here we use the parent () method to obtain the list content of all li elements:

<Script type = "text/javascript"> $ (document ). ready (function () {$ ('# tag li '). eq (0 ). fadeOut ("slow", function () {// alert ($ (this ). clone (). text (); // The result is "Do you say I am a good person, I am a good person", which indicates alert ($ (this) is the text content of the first li element ). parent (). text (); // The content displayed between the four li elements}); </script>

The next step is to append the content of the first li element to the end of the list of all li elements:

<Script type = "text/javascript"> $ (document ). ready (function () {$ ('# tag li '). eq (0 ). fadeOut ("slow", function () {// alert ($ (this ). clone (). text (); the result is "Do you say I am a good person, I am a good person", which indicates the text content of the first li element // alert ($ (this ). parent (). text (); the result is the content between the four li elements $ (this ). clone (). appendTo ($ (this ). parent (); // you can see that the first li element on the page is automatically added to the end of the fourth li element}); </script>

After receiving the above code, you can hide the first li element as follows:

<Script type = "text/javascript"> $ (document ). ready (function () {$ ('# tag li '). eq (0 ). fadeOut ("slow", function () {// alert ($ (this ). clone (). text (); the result is "Do you say I am a good person, I am a good person", which indicates the text content of the first li element // alert ($ (this ). parent (). text (); the result is the content between the four li elements // alert ($ (this ). clone (). appendTo ($ (this ). parent ()). text (); the first li element on the page is automatically added to the end of the fourth li element $ (this ). clone (). appendTo ($ (this ). parent ()). fadeIn ("slow") ;}); </script>

Use setInterval ('scroll _ news () ', 1000 );

The complete code is as follows:

<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();  });});}setInterval('scrollNews()',1000);</script>

In fact, step by step, the results will eventually be obtained.