Каждый тик скрипт печатает одну букву. Эффект напоминает ввод текста в консоли.
Скрипт который побуквенно выдает текст на экран
07.08.2017
Исходный текст:
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>
</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);