<title>jquery Scrolling News Code effect </title>
<meta http-equiv= "Content-type" content= "text/html; charset=gb22312 "/>
<link href= "CSS tutorial/css.css" rel= "stylesheet" type= "Text/css" >
<body>
<div align= "center" >
<div class= "News" id= "HAHA1" >
<ul>
<li> <span>2008-05-16</span> Title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1. </li>
<li> <span>2008-05-04</span> <a href= "http://www.111cn.net/" > Title 2 Title 2 Title 2 Title 2 Title 2 Title 2 Title 2 Title 2. </a> </li>
<li> <span>2008-04-09</span> <a href= "http://www.111cn.net/" > Title 3 title 3 Title 3 Title 3 Title 3 Title 3 title 3 title 3. </a> </li>
<li> <span>2008-03-20</span> <a href= "http://www.111cn.net/" > Title 4 Title 4 Title 4 Title 4 Title 4 Title 4 Title 4 Title 4. </a> </li>
<li> <span>2008-03-20</span> <a href= "http://www.111cn.net/" > title 5 title 5 title 5 title 5 title 5 title 5 title 5 title 5. </a> </li>
</ul>
<ol class= "Activeol" >
</ol>
</div>
<br/>
<div class= "News" id= "HAHA2" >
<ul>
<li> <span>2008-05-16</span> Title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1. </li>
<li> <span>2008-05-04</span> <a href= "http://www.111cn.net/" > Title 2 Title 2 Title 2 Title 2 Title 2 Title 2 Title 2 Title 2. </a> </li>
<li> <span>2008-04-09</span> <a href= "http://www.111cn.net/" > Title 3 title 3 Title 3 Title 3 Title 3 Title 3 title 3 title 3. </a> </li>
<li> <span>2008-03-20</span> <a href= "http://www.niutuku.cn/" > Title 4 Title 4 Title 4 Title 4 Title 4 Title 4 Title 4 Title 4. </a> </li>
</ul>
<ol class= "Activeol" >
</ol>
</div>
<br/>
<div class= "News" id= "HAHA3" >
<ul>
<li> <span>2008-05-16</span> <a href= "http://www.111cn.net/" > Title 2 Title 2 Title 2 Title 2 Title 2 Title 2 Title 2 Title 2. </a> </li>
<li> <span>2008-05-04</span> <a href= "http://www.111cn.net/" > Title 2 Title 2 Title 2 Title 2 Title 2 Title 2 Title 2 Title 2. </a> </li>
<li> <span>2008-04-09</span> <a href= "http://www.111cn.net/" > Title 3 title 3 Title 3 Title 3 Title 3 Title 3 title 3 title 3. </a> </li>
</ul>
<ol class= "Activeol" >
</ol>
</div>
<script src= "Jquery-1[1].2.1.pack.js" type= "text/Web Effects" ></script>
<script>
function Scrollnews (selector,entry,time,startindex)
{
var _self=this;
This.selector=selector;
This.entry=entry;
This.time = time;
this.i=startindex| | 0;
this.count=$ (this.selector+ "ul Li"). length;
$ (this.selector+ "ul Li"). Hide ()//all hidden
$ (this.selector+ "ul li"). EQ (this.i). Show ()
$ (This.selector). bind ("MouseEnter", function () {
if (_self.si) {clearinterval (_self.si);}
}. Bind ("MouseLeave", function () {
_self.showindex (_self.i++);
})
/* Generate Activation OL Project * *
for (Var j=0;j<this.count;j++)
$ (this.selector+ ". Activeol"). Append (' <li><a onclick= "' +this.entry+ '. Showindex (' +j+ ');" href= "#" >< IMG src= "Images/crystal.gif" ></a></li>);
$ (this.selector+ "ol li a"). EQ (this.i). addclass ("active");
This.si=setinterval (this.entry+ ". Showindex (NULL)", this.time);
This.getselector=function () {return this.selector;}
This.showindex=function (Index)
{
this.i++;//Displays the next
if (this.si) {clearinterval (this.si);}
This.si=setinterval (this.entry+ ". Showindex ()", this.time);
if (index!=null)
{
This.i=index;
}
if (This.i==this.count)
this.i=0;
$ (this.selector+ "ul Li"). Hide ();
$ (this.selector+ "ul li"). EQ (this.i). Slidedown ();
$ (this.selector+ "ol li a"). Removeclass ("active");
$ (this.selector+ "ol li a"). EQ (this.i). addclass ("active");
}
}
/** rolling news show effect
Code by cssrain--oranges.
Reprint Please specify: http://www.cssrain.cn
Parameter 1:id
Parameter 2: The name of the instantiated object (same as after Var)
Parameter 3: Interval time
Parameter 4: When initializing, which is the default first display
**/
var s=new scrollnews ("#haha1", "s", 1000, 3);
var s2=new scrollnews ("#haha2", "S2", 2000);
var haha3=new scrollnews ("#haha3", "HAHA3", 3000, 1);
</script>
<pre style= "Width:300px;text-align:left" >
/** rolling news show effect
Parameter 1:id
Parameter 2: The name of the instantiated object (same as after Var)
Parameter 3: Interval time
Parameter 4: When initializing, which is the default first display
Added mouse slide, animation stopped.
**/
var s=new scrollnews ("#haha1", "s", 1000, 3);
var s2=new scrollnews ("#haha2", "S2", 2000);
</pre>
</div>
</body>
SOURCE download
Http://down.111cn.net/down/code/js/2010/1009/21118.html