Я уверен, что многие из вас уже проверили сегодня (2011-02-08) Google doodle (ссылка на статью о CNN, если изменения doodle). Это было потрясающе, и я попытался выяснить его реализацию в Firebug, некоторые вещи, о которых я узнал, состояли в том, что у него есть около трех слоев изображений (для 3D-эффекта), которые скопированы и повернуты (-moz-transform:rotate()) и т.д. Что я сделал, t были найдены (и мои вопросы):
-
Как он спрятал наш курсор мыши, когда вы держите дескриптор, я знаю его
cursor:noneв CSS, но я все еще видел этот CSS для дескриптора:#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; } -
Как это разрешить перетаскивание дескриптора так и поменять местами между 9 изображениями в соответствии с положением в то же время.
-
Пролить некоторый свет на свой Javascript (я не нашел его в firebug... только тот обычный script для поиска, и этот маленький код, который просто вычисляет мод (как насчет возможного кода других задач)
google.doodle.mod = function (a, n) {return a % n;}; 2 /* !eval(new String("google.doodle.mod = function(a,n);)) */
Итак, просто укажите мне, как это реализовано (я упомянул 3, но включил другие моменты, которые могут быть не так очевидны).
Ресурсы изображения для справки:
Ссылка на другие 3 изображения (они были настолько длинны, что было невозможно показать здесь)
Big Fishes, акула
Гигантский хвост
Под водной фауной
Sky
Обновление
Myles Gray здесь внес большой вклад, повторно внедряя (и делая его более читаемым) Javascript Code, CSS и HTML, чтобы показать нам, как Doodle был реализован.
Вот ссылка для вас, чтобы проверить:
http://jsfiddle.net/Mutant_Tractor/jRkND/16/ < - Последняя редакция
