Çoğunuz zaten bugün üzerinde(2011-02-08) baktın eminimGoogle's doodle (link to article on CNN if doodle changes). Harikaydı ve uygulamaları konusunda anlamaya çalıştımFirebugöğrendim bazı şeyleri ve döndürülmüş pan görüntüler yaklaşık 3 kat (3D etkisi) (-moz-transform:rotate()), vb vardır. Buldum bilemedim ne olduğunu (ve benim sorular) hakkında:

• Bizim fare sakladı nasıl imleç kontrol altında tutun, cursor:none. CSS ama ben hala bu CSS kolu gördüm biliyorum:

  #verne-drag {
      background: url("logos/2011/verne-hp.png") no-repeat scroll 1000px 1000px transparent;
      cursor: pointer;/*here its pointer not none*/
      height: 150px;
      left: 565px;
      position: absolute;
      top: 15px;
      width: 150px;
      z-index: 700;
  }
  

• Nasıl aynı anda pozisyonuna göre çok tanıtıcı ve arasında 9 görüntüyü takas sürüklemeyi izin verdi.

• Javascript (sadece mod Olası kod diğer görevleri ne olacak () hesaplayan firebug biri...sadece aramak için her zamanki senaryo, ve bu küçük bir kod bulamadım . üzerine biraz ışık tutmak

  google.doodle.mod = function (a, n) {return a % n;};
  2 /* !eval(new String("google.doodle.mod = function(a,n);)) */
  

Sadece beni işaret nasıl uygulanır (3 söz var ama o kadar belli olmayabilir diğer noktaları dahil).

Başvuru Kaynakları resim:

Diğer 3 Görüntüleri (burada göstermek mümkün değildi o kadar uzun Olduklarını) bağlantı

Big Fishes, sharkGiant TailUnder water faunaSky Güncelleme

Myles Gray burada yeniden hayata geçirerek büyük bir katkı sağlamıştır (ve daha okunabilir hale getirmek için) Javascript Kodu, CSS ve HTML Doodle nasıl uygulandığını bize gösteriyor.

Burada bakmanız için link:

http://jsfiddle.net/Mutant_Tractor/jRkND/16/ <-- en Son Revizyon

Bu onların tüm kod okunabilir hale ile yapabileceğimin en iyisi

http://jsfiddle.net/Mutant_Tractor/jRkND/16/