JQuery Rolling

download jquery.rolling.js mail:songsungkyun@naver.com

Thanks to Kevin Cheung, Wilson Smith.
- modified setRollingAnimationFrame method 20080601

Examples
Basic Example
Rolling Large Images Example
Rolling Other HTML Content Example
Rolling Mouse Event Example
Rolling Several Items/Reverse Example
Rolling With Some Effect Example
Interactive Rolling Example1
Interactive Rolling Example2
Interactive Rolling Example3
Interactive Rolling Example4
Generating Rolling Example Sample

...

Rolling Animation Frame

Rolling Time ms

Viewing Time ms

Status

$(function() { var rollingDiv = $("#rollingHead"); /* * The rolling direction(right, left, up, down) * The width of a rolling item * The height of a rolling item * The count of the visible rolling item(optional, default 1) */ rollingDiv.rolling("right", 140, 110, 5); rollingDiv.addRollingItem("<div><table width='130' height='100'><tr><td align='center' valign='center'><a href='javascript: showYoutubeById(\"oG5RQPRCHH4\")'><img src='http://i.ytimg.com/vi/oG5RQPRCHH4/default.jpg' width='120' height='90' alt='Capoeira Demo 2' border='0'/></a></td></tr></table>"); rollingDiv.addRollingItem("<div><table width='130' height='100'><tr><td align='center' valign='center'><a href='javascript: showYoutubeById(\"4CDAZVR7kgY\")'><img src='http://i.ytimg.com/vi/4CDAZVR7kgY/default.jpg' width='120' height='90' alt='Capoeira clip: Cueca' border='0'/></a></td></tr></table>"); rollingDiv.addRollingItem("<div><table width='130' height='100'><tr><td align='center' valign='center'><a href='javascript: showYoutubeById(\"tbW6ErTogio\")'><img src='http://i.ytimg.com/vi/tbW6ErTogio/default.jpg' width='120' height='90' alt='Capoeira Demonstration' border='0'/></a></td></tr></table>"); rollingDiv.addRollingItem("<div><table width='130' height='100'><tr><td align='center' valign='center'><a href='javascript: showYoutubeById(\"GOa5FSwK96w\")'><img src='http://i.ytimg.com/vi/GOa5FSwK96w/default.jpg' width='120' height='90' alt='abada capoeira trailer' border='0'/></a></td></tr></table>"); rollingDiv.addRollingItem("<div><table width='130' height='100'><tr><td align='center' valign='center'><a href='javascript: showYoutubeById(\"UJKR4cOt2Dc\")'><img src='http://i.ytimg.com/vi/UJKR4cOt2Dc/default.jpg' width='120' height='90' alt='Capoeira Mestre' border='0'/></a></td></tr></table>"); rollingDiv.addRollingItem("<div><table width='130' height='100'><tr><td align='center' valign='center'><a href='javascript: showYoutubeById(\"Qtkt_cbFj6U\")'><img src='http://i.ytimg.com/vi/Qtkt_cbFj6U/default.jpg' width='120' height='90' alt='Capoeirage III mix by Capoeira4Real.com' border='0'/></a></td></tr></table>"); rollingDiv.addRollingItem("<div><table width='130' height='100'><tr><td align='center' valign='center'><a href='javascript: showYoutubeById(\"EX82tPUy1LE\")'><img src='http://i.ytimg.com/vi/EX82tPUy1LE/default.jpg' width='120' height='90' alt='Miudinho Capoeira on the Beach' border='0'/></a></td></tr></table>"); rollingDiv.addRollingItem("<div><table width='130' height='100'><tr><td align='center' valign='center'><a href='javascript: showYoutubeById(\"4VNkBwgvVGo\")'><img src='http://i.ytimg.com/vi/4VNkBwgvVGo/default.jpg' width='120' height='90' alt='Capoeira - Instinto Coletivo (O Rappa)' border='0'/></a></td></tr></table>"); rollingDiv.addRollingItem("<div><table width='130' height='100'><tr><td align='center' valign='center'><a href='javascript: showYoutubeById(\"hhPmrpxGLqc\")'><img src='http://i.ytimg.com/vi/hhPmrpxGLqc/default.jpg' width='120' height='90' alt='Mestre Jose Antonio vs Mestre Poncianinho' border='0'/></a></td></tr></table>"); rollingDiv.addRollingItem("<div><table width='130' height='100'><tr><td align='center' valign='center'><a href='javascript: showYoutubeById(\"14GxmMgG1Tc\")'><img src='http://i.ytimg.com/vi/14GxmMgG1Tc/default.jpg' width='120' height='90' alt='cordao de ouro 3amigos : ponchianinho casquinha papa leguas' border='0'/></a></td></tr></table>"); rollingDiv.bind("mouseover", function() { $(this).stopRolling(); }); rollingDiv.bind("mouseout", function() { $(this).resumeRolling(); }); var opacity = 0.6; $('img', rollingDiv.getRollingItems()).css("opacity", opacity); $('img', rollingDiv.getRollingItems()).hover( function() { $(this).animate({ width: "140", height: "110", opacity: 1 }, 300); $("#rollingHeadComment").html("<b><font color='blue'>" + $(this).attr('alt') + "</font></b>"); }, function() { $(this).animate({ width: "130", height: "100", opacity: opacity }, 300); $("#rollingHeadComment").html("<b><font color='white'>...</font></b>"); } ); /* * Millisecond of rolling animation * Millisecond of viewing * The frame count of animation */ rollingDiv.startRolling(30, 0, 50); });