Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
jQuery ile HTML Elemanlarınıza Rastgele Renkler
#1
jQuery ile Rastgele Yazı ve Background Renkleri

İlk olarak renk şablonumuzu hazırlayalım. İstediğiniz tüm renkleri array içerisine ekleyebilirsiniz. Hex, RGB ve HSL gibi tüm renk tanımlarını destekleyecek bu yapıya 20 adet flat renkten oluşan aşağıdaki şablonu da dahil edip bu adımı hızlıca geçebilirsiniz.
Kullanacağımız flat renkler şöyle :
  • #1abc9c

  • #2ecc71

  • #3498db

  • #9b59b6

  • #34495e

  • #16a085

  • #27ae60

  • #2980b9

  • #8e44ad

  • #2c3e50

  • #f1c40f

  • #e67e22

  • #e74c3c

  • #ecf0f1

  • #95a5a6

  • #f39c12

  • #d35400

  • #c0392b

  • #bdc3c7

  • #7f8c8d
jQuery Kodları
Öncelikle sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa body‘nin bittiği yere, tanımının hemen öncesine jQuery’i ekleyerek devam edelim.


PHP Kod:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script

Şimdi fonksiyonumuzu sitemizin alt kısmına, jQuery’nin de altına ekleyerek sayfamıza dahil edelim.


PHP Kod:
function color(elementattribute) {
 
 var colors = ["#1abc9c""#2ecc71""#3498db""#9b59b6""#34495e""#16a085""#27ae60""#2980b9""#8e44ad""#2c3e50""#f1c40f""#e67e22""#e74c3c""#ecf0f1""#95a5a6""#f39c12""#d35400""#c0392b""#bdc3c7""#7f8c8d"];
 
 var getRandom colors[Math.floor(Math.random() * colors.length)];
 
 if (attribute == 'color') {
 
   $(element).css('color'getRandom);
 
 } else {
 
   $(element).css('background-color'getRandom);
 
 }


Artık web sayfanızdaki herhangi bir elemanı selector öğesiyle çağırarak arkaplan ve yazı tipi rengi tanımlayabilirsiniz. Kullanım şekli en basit haliyle şöyle :


PHP Kod:
color('body','background'); // Sayfa arkaplan rengini rasgele değiştirir.
 
color('body','color'); // Sayfa yazı rengini rasgele değiştirir.
 
color('.menu','color'); // Menü classına sahip elemanın yazı rengini rasgele değiştirir. 
Ara
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi



***

Online Shopping App
Online Shopping - E-Commerce Platform
Online Shopping - E-Commerce Platform
Feinunze Schmuck Jewelery Online Shopping