1 Let it slide!
See what between here moving and here
See what between here moving and here
I made this script because someone posted a gig on Craiglist. Start to them!
2 Source
2.1 Slide down
var moving_target = 'mtext'; var moving_text = ['moving', 'text', 'here', '<span style="color:red">da da!</span>']; var moving_index = null; var moving_box_height = null; var moving_show_time = 1000; var moving_scroll_time = 500; function move_text() { var $mtext = $('#' + moving_target); if (moving_index == null) { moving_box_height = $mtext.parent().height(); // Initialize $mtext.empty(); $mtext.css({ display: 'inline-block', '*display': 'inline', lineHeight: 'normal', textAlign: 'center', verticalAlign: 'text-top', overflowY: 'hidden' }); // reverse array, so we can create from top to bottom, from last text to first text moving_text.reverse(); for (var idx in moving_text) $mtext.append($('<div>' + moving_text[idx] + '</div>')); // We need one more, so it could look like circular $mtext.append($('<div>' + moving_text[0] + '</div>')); $mtext.css('height', moving_box_height + 'px'); $mtext.scrollTop((moving_text.length - 1 - moving_index) * moving_box_height); } if (moving_index >= moving_text.length - 1) { $mtext.scrollTop(moving_text.length * moving_box_height); moving_index = -1; } $mtext .delay(moving_show_time) .animate( {scrollTop: (moving_text.length - 1 - ++moving_index) * moving_box_height}, moving_scroll_time, move_text ) ; } $(move_text);
2.2 Slide left
var h_moving_target = 'h_mtext'; var h_moving_text = ['moving', 'text', 'here', '<span style="color:red">da da!</span>']; var h_moving_index = null; var h_moving_box_width = null; var h_moving_show_time = 1000; var h_moving_scroll_time = 500; function h_move_text() { var $h_mtext = $('#' + h_moving_target); if (h_moving_index == null) { // Initialize $h_mtext.empty(); $h_mtext.css({ display: 'inline-block', '*display': 'inline', height: $h_mtext.parent().height(), lineHeight: 'normal', textAlign: 'center', verticalAlign: 'text-top', 'overflow': 'hidden' }); var $mwrap = $('<span/>', { css: { display: 'inline-block', '*display': 'inline' } }) .appendTo($h_mtext); h_moving_box_width = 0; for (var idx in h_moving_text) { $t = $('<span>' + h_moving_text[idx] + '</span>').appendTo($mwrap); if ($t.width() > h_moving_box_width) h_moving_box_width = $t.width(); } $mwrap.append($('<span>' + h_moving_text[0] + '</span>')); $mwrap.children().css({ display: 'inline-block', '*display': 'inline', width: h_moving_box_width }); $mwrap.width($mwrap.children().length * h_moving_box_width); $h_mtext.width(h_moving_box_width); h_moving_index = 0; $h_mtext.scrollLeft(h_moving_index * h_moving_box_width); } if (h_moving_index >= h_moving_text.length) { $h_mtext.scrollLeft(0); h_moving_index = 0; } $h_mtext .delay(h_moving_show_time) .animate( {scrollLeft: ++h_moving_index * h_moving_box_width}, h_moving_scroll_time, h_move_text ) ; } $(h_move_text);
0 comments:
Post a Comment