jQuery плагин для вывода текста по букве.

28.12.2016 14:52:34

Вместо каждой буквы выводятся [], потом мигают и меняются на букву.

pic1

01.html (Download)

 <html>

<head>
  <title></title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  <script src="/f.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){

	var options = {
  		newsList: "#ticker",
 		startDelay: 10,
 		placeHolder1: " []"
	}
	$().newsTicker(options);

});
</script>
</head>

<body>

<div id="lenta">

	<ul id="ticker">
		<li><a href="#1">01:20| Длинный текст №1 </a></li>
		<li><a href="#2">02:30| Длинный <b>текст</b> №2 </a></li>
		<li><a href="#3">03:40| Длинный текст №3 </a></li>
	</ul>

</div>

</body>

</html>

f.js (Download)

 jQuery.extend(jQuery.easing, {
    easeIn: function (x, t, b, c, d) {
        return jQuery.easing.easeInQuad(x, t, b, c, d);
    },
    easeOut: function (x, t, b, c, d) {
        return jQuery.easing.easeOutQuad(x, t, b, c, d);
    },
    easeInOut: function (x, t, b, c, d) {
        return jQuery.easing.easeInOutQuad(x, t, b, c, d);
    },
    expoin: function (x, t, b, c, d) {
        return jQuery.easing.easeInExpo(x, t, b, c, d);
    },
    expoout: function (x, t, b, c, d) {
        return jQuery.easing.easeOutExpo(x, t, b, c, d);
    },
    expoinout: function (x, t, b, c, d) {
        return jQuery.easing.easeInOutExpo(x, t, b, c, d);
    }
});
jQuery.extend(jQuery.easing, {
    easeInOutExpo: function (x, t, b, c, d) {
        if (t == 0) return b;
        if (t == d) return b + c;
        if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
        return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
    }
});
jQuery(

function () {
    jQuery("div.csw").prepend("<p class='loading'>Загрузка данных…...<br /></p>");
});
var j = 0;
jQuery.fn.codaSlider = function (settings) {
    settings = jQuery.extend({
        easeFunc: "easeInOutExpo",
        easeTime: 750,
        toolTip: false
    }, settings);
    return this.each(function () {
        var container = jQuery(this);
        container.find("p.loading").remove();
        container.removeClass("csw").addClass("stripViewer");
        var panelWidth = container.find("div.panel").width();
        var panelCount = container.find("div.panel").size();
        var stripViewerWidth = panelWidth * panelCount;
        container.find("div.panelContainer").css("width", stripViewerWidth);
        var navWidth = panelCount * 2;
        if (location.hash && parseInt(location.hash.slice(1)) <= panelCount) {
            var cPanel = parseInt(location.hash.slice(1));
            var cnt = -(panelWidth * (cPanel - 1));
            jQuery(this).find("div.panelContainer").css({
                left: cnt
            });
        } else {
            var cPanel = 1;
        };
        container.each(function (i) {
            jQuery(this).after("<div class='stripNavL' id='stripNavL" + j + "'><a href='#'><< предыдущий |</a><\/div>");
            jQuery(this).after("<div class='stripNavR' id='stripNavR" + j + "'><a href='#'>следующий заголовок >></a><\/div>");
            jQuery("div#stripNavL" + j + " a").click(function () {
                if (cPanel == 1) {
                    var cnt = -(panelWidth * (panelCount - 1));
                    cPanel = panelCount;
                    jQuery(this).parent().parent().find("div.stripNav a.current").removeClass("current").parent().parent().find("li:last a").addClass("current");
                } else {
                    cPanel -= 1;
                    var cnt = -(panelWidth * (cPanel - 1));
                    jQuery(this).parent().parent().find("div.stripNav a.current").removeClass("current").parent().prev().find("a").addClass("current");
                };
                jQuery(this).parent().parent().find("div.panelContainer").animate({
                    left: cnt
                }, settings.easeTime, settings.easeFunc);
                location.hash = cPanel;
                return false;
            });
            jQuery("div#stripNavR" + j + " a").click(function () {
                if (cPanel == panelCount) {
                    var cnt = 0;
                    cPanel = 1;
                    jQuery(this).parent().parent().find("div.stripNav a.current").removeClass("current").parent().parent().find("a:eq(0)").addClass("current");
                } else {
                    var cnt = -(panelWidth * cPanel);
                    cPanel += 1;
                    jQuery(this).parent().parent().find("div.stripNav a.current").removeClass("current").parent().next().find("a").addClass("current");
                };
                jQuery(this).parent().parent().find("div.panelContainer").animate({
                    left: cnt
                }, settings.easeTime, settings.easeFunc);
                location.hash = cPanel;
                return false;
            });
            jQuery("a.cross-link").click(function () {
                jQuery(this).parents().find(".stripNav ul li a:eq(" + (parseInt(jQuery(this).attr("href").slice(1)) - 1) + ")").trigger('click');
            });
            jQuery("div#stripNav" + j).css("width", navWidth);
            if (location.hash && parseInt(location.hash.slice(1)) <= panelCount) {
                jQuery("div#stripNav" + j + " a:eq(" + (location.hash.slice(1) - 1) + ")").addClass("current");
            } else {
                jQuery("div#stripNav" + j + " a:eq(0)").addClass("current");
            }
        });
        j++;
    });
};
(

function ($) {
    $.jtabber = function (params) {
        var navDiv = params.mainLinkTag;
        var selectedClass = params.activeLinkClass;
        var hiddenContentDiv = params.hiddenContentClass;
        var showDefaultTab = params.showDefaultTab;
        var showErrors = params.showErrors;
        var effect = params.effect;
        var effectSpeed = params.effectSpeed;
        if (showErrors) {
            if (!$(navDiv).attr('title')) {
                alert("ERROR: The elements in your mainLinkTag paramater need a 'title' attribute.\n (" + navDiv + ")");
                return false;
            } else if (!$("." + hiddenContentDiv).attr('id')) {
                alert("ERROR: The elements in your hiddenContentClass paramater need to have an id.\n (." + hiddenContentDiv + ")");
                return false;
            }
        }
        if (!isNaN(showDefaultTab)) {
            showDefaultTab--;
            $("." + hiddenContentDiv + ":eq(" + showDefaultTab + ")").css('display', 'block');
            $(navDiv + ":eq(" + showDefaultTab + ")").addClass(selectedClass);
        }
        $(navDiv).each(function () {
            $(this).click(function () {
                $(navDiv).each(function () {
                    $(this).removeClass();
                });
                $("." + hiddenContentDiv).css('display', 'none');
                $(this).addClass(selectedClass);
                var contentDivId = $(this).attr('title');
                if (effect != null) {
                    switch (effect) {
                    case 'slide':
                        $("#" + contentDivId).slideDown(effectSpeed);
                        break;
                    case 'fade':
                        $("#" + contentDivId).fadeIn(effectSpeed);
                        break;
                    }
                } else {
                    $("#" + contentDivId).css('display', 'block');
                }
                return false;
            })
        })
    }
})(jQuery);
(

function ($) {
    function runTicker(settings) {
        if (settings.firstRun == 1) {
            currentLength = settings.currentLength;
            currentItem = settings.currentItem;
            settings.firstRun = 0;
        }
        if (currentItem == settings.newsItemCounter + 1) {
            currentItem = 0;
        }
        if (currentLength == 0) {
            $(settings.newsList).empty().append('<li><a href="' + settings.newsLinks[currentItem] + '"></a></li>');
        }
        if (currentLength % 2 == 0) {
            placeHolder = settings.placeHolder1;
        } else {
            placeHolder = settings.placeHolder2;
        }
        if (currentLength <= settings.newsItems[currentItem].length + 1) {
            var tickerText = settings.newsItems[currentItem].substring(0, currentLength);
            $(settings.newsList + ' li a').text(tickerText + placeHolder);
            currentLength++;
            setTimeout(function () {
                runTicker(settings);
                settings = null;
            }, settings.tickerRate);
        } else {
            $(settings.newsList + ' li a').text(settings.newsItems[currentItem]);
            currentLength = 0;
            currentItem++;
            setTimeout(function () {
                runTicker(settings);
                settings = null;
            }, settings.loopDelay);
        }
    }
    $.fn.extend({
        newsTicker: function (settings) {
            settings = jQuery.extend({
                newsList: "#ticker",
                tickerRate: 80,
                startDelay: 100,
                loopDelay: 3000,
                placeHolder1: " |",
                placeHolder2: "_"
            }, settings);
            var newsItems = new Array();
            var newsLinks = new Array();
            var newsItemCounter = 0;
            $(settings.newsList + ' li a').each(function () {
                newsItems[newsItemCounter] = $(this).text();
                newsLinks[newsItemCounter] = $(this).attr('href');
                newsItemCounter++;
            });
            settings = jQuery.extend(settings, {
                newsItems: newsItems,
                newsLinks: newsLinks,
                newsItemCounter: newsItemCounter - 1,
                currentItem: 0,
                currentLength: 0,
                firstRun: 1
            });
            setTimeout(function () {
                runTicker(settings);
                settings = null;
            }, settings.startDelay);
        }
    });
})(jQuery);

Скачать


Категории: JavaScript
Яндекс.Метрика