Yeni bir Web Tasarım ve Programlama dersi makalesi ile birlikteyiz.
Metinsel ifadelerin görüntülenmesinde daktilo efekti en sık kullanılan efektlerdendir. Metnin karakter karakter görüntülenmesi okunması için ayrı bir cazibe sunmaktadır. Bu uygulamamızda 10 içerik için daktilo efekti kullanılmaktadır.
Şimdi uygulamaya ait kodları yazalım.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(function () {
var repeat = 1;
var ch = 0;
var item = 0;
var items = $('#caption li').length;
var time = 1000;
var delay = 50;
var wait = 4000
$('#showCaption').css('width', ($('#caption').width() + 20));
function tickInterval() {
if (item < items) {
var text = $('#caption li:eq(' + item + ')').text();
type(text);
text = null;
var tick = setTimeout(tickInterval, time);
} else {
if (repeat == 1) {
ch = 0;
item = 0;
tickInterval();
} else {
clearTimeout(tick);
}
}
}
function type(text) {
time = delay;
$('#showCaption').html(text.substr(0, ch++));
if (ch > text.length) {
item++;
ch = 0;
time = wait;
}
}
var tick = setTimeout(tickInterval, time);
});
</script>
<style type="text/css">
#caption {
display: none;
}
#showCaption{
font-family:Courier New;
font-size:20px;
color:#000;
font-weight:bold;
width:350px;
min-width:350px;
}
</style>
</head>
<body>
<ul id="caption">
<li>Birinci İçerik.</li>
<li>İkinci İçerik.</li>
<li>Üçüncü İçerik.</li>
<li>Dördüncü İçerik.</li>
<li>Beşinci İçerik.</li>
<li>Altıncı İçerik.</li>
<li>Yedinci İçerik.</li>
<li>Sekizinci İçerik.</li>
<li>Dokuzuncu İçerik.</li>
<li>Onuncu İçerik.</li>
</ul>
<div id="showCaption"></div>
</body>
</html>