jquery News Scrolling Plugin Jquery.roller.js_jquery

I have given a note in the source code, there are some deficiencies or can improve the place, I hope you can leave a message to explore ...

Effect picture (more simple):

Copy Code code as follows:

;(function ($) {
$.fn.roller = function (options) {
var opts = $.extend ({}, $.fn.roller.defaults, Options),
To manage scrolling information through a circular queue
Itemqueue = new Array ();
Return This.each (function (index) {
var $div = $ (this). addclass (' Roller-container ');
Class with the given array.
if (Opts.items && Util.isarray (opts.items)) {
for (var i = 0, len = opts.items.length i < len; i++) {
Itemqueue.push ($ (' <div class=roller-item></div> '). Append (Buildlink (opts.items[i)));
}
} else {
can also be initialized with a page element
}
Add an entry to the container in the first item to be displayed
for (i = 0, len = Opts.shownum i < len; i++) {
if (IsUp ()) {
$div. Append (Itemqueue[i]);
} else {
$div. prepend (Itemqueue[i]);
}
}
Place a copy of the entry that has 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 ());
}
Get a scrolling element
var _item = $ ('. Roller-item:first ', this),
Get its perimeter height including margin
_outheight = _item.outerheight (True),
Total content height of container
Totalheight = _outheight * parseint (Opts.shownum, 10);
Save initial MarginTop value
Opts.orginal_margintop = parseint (_item.css (' Margin-top '), 10);
if (IsUp ()) {
Opts.anim_margintop = Opts.orginal_margintop-_outheight-parseint ($div. css (' padding-top '), 10);
} else {
Opts.anim_margintop = Opts.orginal_margintop + _outheight;
}
Initializing container styles and events
$div. CSS ({
' Height ': totalheight + ' px ',
' Overflow ': ' Hidden '
}). Hover (function () {
Stop scrolling when mouse enters
Opts.hold = true;
}, function () {
Mouse left to start scrolling again
Opts.hold = false;
Startrolling ($ (this));
}). Trigger (' MouseLeave ');
});
/**
* Rolling direction judgment
*/
function IsUp () {
if (opts.direction = = "Up") return true;
if (opts.direction = = "Down") return false;
throw new Error (' direction should is ' up ' or ' down ');
}
/**
* Generate a jquery-encapsulated <A></A>
*/
function Buildlink (item) {
var html = item.html;
Delete item.html;
return $ (' <A></A> '). attr (item). HTML (HTML);
}
function startrolling ($div) {
settimeout (function () {
Whether to stop scrolling
if (!opts.hold) {
var-i = null,
_funself = Arguments.callee;
The current first element
$div. Find ('. Roller-item:first ');
First.animate ({MarginTop:opts.anim_marginTop},
Opts.interval,
function () {
Remove the next entry from the queue
var temp = Itemqueue.shift ();
Put a copy of it on the tail of the queue.
Itemqueue.push (Temp.clone ());
if (IsUp ()) {
To remove the current first element
First.remove ();
Append the newly-removed entry into the container
$div. Append (Temp.hide ());
} else {
To remove the current last element
$div. Find ('. Roller-item:last '). Remove ();
Restores the margintop of the current first element to its original value
First.css (' Margin-top ', opts.orginal_margintop + ' px ');
Prepend the newly-removed entry into the container
$div. Prepend (Temp.hide ());
}
Temp.fadein (OPTS.INTERVAL-50);
Triggers the next loop
SetTimeout (_funself, opts.interval);
});
}
}, Opts.interval);
};
};
Tool Methods Collection
var Util = {
Tostring:function (v) {
return Object.prototype.toString.apply (v);
},
To determine if it is an array
Isarray:function (v) {
return util.tostring (v) = = ' [Object Array] ';
}
};
Scrolling News default configuration
$.fn.roller.defaults = {
interval:1000,//scrolling interval
Shownum:5,//display of news at once
Hold:false//whether to stop scrolling
Direction: ' Up '//scrolling direction
};
}) (JQuery);

Look at the page using the code

Copy Code code as follows:

<div id=container>
</DIV>
$ (' #container '). Roller ({
Shownum:4,//display number
interval:1500,//scrolling time interval
Direction: ' Down ',///rolling direction
Items: [{//Content
Title: ' Ccav scrolling news 1 ',//a title attribute
HTML: ' CCAV rolling news 1 ',//a's innerHTML
Target: ' _blank ', target of//a
href: href of ' http://www.google.com.hk '//a
}, {
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