HTML5 ile marquee desteği bitti. Javascript ve CSS yöntemleri ile marqueenin yaptığı işlemleri yapmak mümkün. Bu kısa örnekte timeInterval nesnesinin kullanılarak kayan bir yazı yapılmıştır. Hazırlanan örnek fonksiyon olarak hazırlanmıştır. Fonksiyona kayacak nesne ve zaman değerleri girilerek bütün yazılara uygulamak mümkündür.
HTML:
Merhaba Dünya
1 2 3 |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <style> body{ background: #2ecc71; } #yazi{ margin:80px auto; padding:20px; width: 300px; font-size:25px; background: #34495e; color:#ecf0f1; border: solid 3px #16a085; } </style> |
JavaScript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <script> /*KayanYazi fonksiyonunu ekleyip daha esnek kullanılmasını sağlıyoruz.*/ KayanYazi=function(nesne,zaman){ let yaziNesne=nesne; setInterval(function(){ let yazi = yaziNesne.innerHTML; let harf = yazi.substring(0,1); let kalan = yazi.substring(1,yazi.length); kalan=kalan+harf yaziNesne.innerHTML=kalan; }, zaman); } var nesne=document.getElementById("yazi"); KayanYazi(nesne,750); </script> |
HTML+CSS+JS(Tüm Kodlar):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>JavaScript Örnekleri</title> <style> body{ background: #2ecc71; } #yazi{ margin:80px auto; padding:20px; width: 300px; font-size:25px; background: #34495e; color:#ecf0f1; border: solid 3px #16a085; } </style> </head> <body> <div id="yazi">Merhaba Dünya </div> <script> /*KayanYazi fonksiyonunu ekleyip daha esnek kullanılmasını sağlıyoruz.*/ KayanYazi=function(nesne,zaman){ let yaziNesne=nesne; setInterval(function(){ let yazi = yaziNesne.innerHTML; let harf = yazi.substring(0,1); let kalan = yazi.substring(1,yazi.length); kalan=kalan+harf yaziNesne.innerHTML=kalan; }, zaman); } var nesne=document.getElementById("yazi"); KayanYazi(nesne,750); </script> </body> </html> |
Diğer Örnekler:
- JavaScript Hipotenüs Hesaplama Örneği
- JavaScript Sayısal Loto Örneği
- JavaScript Varmısın Yokmusun Örneği
- JavaScript Dizi İçindeki En Büyük En Küçük Sayıyı Bulma Örneği
- JavaScript Dikdörtgen Alan ve Çevre Hesaplama Örneği
- JavaScript Asal Sayı Kontrol Etme Örneği
- JavaScript Daire Alanı ve Çevresini Hesaplama Örneği
- JavaScript Faktoriyel Hesaplama Örneği
- JavaScript While Döngüsü Örnekleri
- JavaScript Metin İçinde Arama Yapma Örneği
- JavaScript Switch Case Kullanımı Örneği
- JavaScript Rastgele Sayı Üretme Örneği
- JavaScript Girilen Sayının Negatif Pozitif Olduğunu Bulan Örnek
- JavaScript Sayfa Arkaplan Rengini Rastgele Değiştirme Örneği
- JavaScript Dizi Metotları Örnekleri
- JavaScript Km-Mil Çevirme Örneği
- JavaScript Derece-Fahrenayt Çevirme Örneği
- JavaScript Gün İsmini Ekrana Yazdırma Örneği
- JavaScript Sayı Tahmin Oyunu Örneği
- JavaScript Console Log Kullanımı
- JavaScript Kürenin Hacmini Hesaplama Örneği
- JavaScript Üçgenin Alanını Hesaplama Örneği
- JavaScript Çarpım Tablosu Örneği
- JavaScript 3′ e ve 5′ e Tam Bölünebilme Örneği
- JavaScript Karenin Alanı ve Çevresini Hesaplama Örneği
- JavaScript Yazılı Ortalaması Hesaplama Örneği
- JavaScript Try-Catch-Finally Kullanımı Örneği
- JavaScript Div İçeriğini Temizleme Örneği
- JavaScript Switch-Case Kullanımı Örneği
- JavaScript Buttona tıklandığında Kod Çalıştırma Örneği
- JavaScript events(olay) kullanımı Örnekleri
- JavaScript For Döngüsü Karışık Örnekler
- JavaScript Tarih ve Saat Yazdırma Örneği
- JavaScript Fonksiyon Kullanımı Örneği
- JavaScript Vize Final Hesaplama Örneği
- JavaScript onInput Olay Kullanımı Örneği
- JavaScript Kayan Yazı Örneği
- JavaScript Kombinasyon Hesaplama
- JavaScript radio Kullanarak Dört İşlem Örneği
- JavaScript Toplama Çıkarma Çarpma Bölme Örneği
- JavaScript Sayfayı Tam Ekran Yapma Örneği
- JavaScript Fare Konumunu Öğrenme Örneği
- JavaScript Object Kullanımı Örneği
- JavaScript Kalan Karakter Bulma- Karakter Sayma Örneği
- JavaScript Mükemmel Sayı Kontrol Etme Örneği
yayınla seo lazım
sanirim kodda bir sorun var, taglari belirtilmemis. Aslinda belirtip denememe ragmen calismadi maaselef.
Merhaba. kodları birleştiriken js kodlarını script etiketi içerisine almayı unutmuşum. Şu an sorun yok. En alttaki tüm kodları kopyala-yapıştır yaparak deneyebilirsiniz.