If the task is required, a jQuery news rolling plug-in jquery is written. roller. js, the function is relatively simple, and may be added to the ajax round-robin dynamic loading function for a period of time in the future. the source code is provided below. If necessary, you can directly download the comments provided in the source code. If there are any shortcomings or improvements, I hope you can leave a message to discuss them...
(Relatively simple ):
The Code is as follows:
; (Function ($ ){
$. Fn. roller = function (options ){
Var opts = $. extend ({}, $. fn. roller. defaults, options ),
// Use the cyclic queue to manage rolling Information
ItemQueue = new Array ();
Return this. each (function (index ){
Var $ p = $ (this). addClass ('roller-container ');
// Initialize with the given Array
If (opts. items & Util. isArray (opts. items )){
For (var I = 0, len = opts. items. length; I <len; I ++ ){
ItemQueue. push ($ (''). append (buildLink (opts. items [I]);
}
} Else {
// You can also use page elements for initialization.
}
// Add the entry to be displayed at the beginning to the container
For (I = 0, len = opts. showNum; I <len; I ++ ){
If (isUp ()){
$ P. append (itemQueue [I]);
} Else {
$ P. prepend (itemQueue [I]);
}
}
// Put the entry copy that has already been added to the container at the end of the loop queue
For (I = 0, len = opts. showNum; I <len; I ++ ){
Var temp = itemQueue. shift ();
ItemQueue. push (temp. clone ());
}
// Obtain a Rolling Element
Var _ item = $ ('. roller-item: first', this ),
// Obtain its peripheral height including margin
_ OutHeight = _ item. outerHeight (true ),
// The height of the container content
TotalHeight = _ outHeight * parseInt (opts. showNum, 10 );
// Save the initial marginTop Value
Opts. orginal_marginTop = parseInt(_item.css ('margin-top'), 10 );
If (isUp ()){
Opts. anim_marginTop = opts. orginal_marginTop-_ outHeight-parseint(paip.css ('padding-top'), 10 );
} Else {
Opts. anim_marginTop = opts. orginal_marginTop + _ outHeight;
}
// Initialize container styles and events
Export p.css ({
'Height': totalHeight + 'px ',
'Overflow': 'ddn'
}). Hover (function (){
// Stop scrolling when the mouse enters
Opts. hold = true;
}, Function (){
// Move the mouse away and start rolling again
Opts. hold = false;
StartRolling ($ (this ));
}). Trigger ('mouseleave ');
});
/**
* Rolling direction judgment
*/
Function isUp (){
If (opts. direction = 'up') return true;
If (opts. direction = 'low') return false;
Throw new Error ('direction shocould be "up" or "down "');
}
/**
* Generate a jQuery-encapsulated
*/
Function buildLink (item ){
Var html = item.html;
Delete item.html;
Return condition (''{.attr(item}.html (html );
}
Function startRolling ($ p ){
SetTimeout (function (){
// Whether to stop scrolling
If (! Opts. hold ){
Var first = null,
_ FunSelf = arguments. callee;
// The first element
First = $ p. find ('. roller-item: first ');
First. animate ({marginTop: opts. anim_marginTop },
Opts. interval,
Function (){
// Retrieve the next entry from the queue
Var temp = itemQueue. shift ();
// Put its copy at the end of the queue
ItemQueue. push (temp. clone ());
If (isUp ()){
// Remove the first element
First. remove ();
// Append the retrieved entry to the container
$ P. append (temp. hide ());
} Else {
// Remove the current last element
$ P. find ('. roller-item: last'). remove ();
// Restore the marginTop of the first element to the initial value.
First.css ('margin-top', opts. orginal_marginTop + 'px ');
// Prepend the retrieved entry to the container
$ P. prepend (temp. hide ());
}
Temp. fadeIn (opts. interval-50 );
// Trigger the next loop
SetTimeout (_ funSelf, opts. interval );
});
}
}, Opts. interval );
};
};
// Set of tool Methods
Var Util = {
ToString: function (v ){
Return Object. prototype. toString. apply (v );
},
// Determine whether it is an Array
IsArray: function (v ){
Return Util. toString (v) ===' [object Array] ';
}
};
// Default rolling news Configuration
$. Fn. roller. defaults = {
Interval: 1000, // scroll interval
ShowNum: 5, // number of news displayed at a time
Hold: false, // whether to stop scrolling
Direction: 'up' // scroll direction
};
}) (JQuery );
Check the code on the page.
The Code is as follows:
$ ('# Iner'). roller ({
ShowNum: 4, // display number
Interval: 1500, // interval of scrolling
Direction: 'low', // scroll direction
Items: [{// content
Title: 'ccav rolling news 1', // The title attribute of
Html: 'ccav rolling news 1', // innerHTML of
Target: '_ blank', // target of
Href: 'http: // www.google.com.hk '// href of
},{
Title: 'ccav rolling news 2 ',
Html: 'ccav rolling news 2 ',
Target: '_ blank ',
Href: 'http: // www.google.com.hk'
},{
Title: 'ccav rolling news 3 ',
Html: 'ccav rolling news 3 ',
Target: '_ blank ',
Href: 'http: // www.google.com.hk'
},{
Title: 'ccav rolling news 4 ',
Html: 'ccav rolling news 4 ',
Target: '_ blank ',
Href: 'http: // www.google.com.hk'
},{
Title: 'ccav rolling news 5 ',
Html: 'ccav rolling news 5 ',
Target: '_ blank ',
Href: 'http: // www.google.com.hk'
},{
Title: 'ccav rolling news 6 ',
Html: 'ccav rolling news 6 ',
Target: '_ blank ',
Href: 'http: // www.google.com.hk'
}]
});
Online Demo http://demo.jb51.net/js/2011/news_roller_Demo/jquery.roller.html
Package download/201106/yuanma/news_roller_Demo.rar