 | ||||||||||||||||||||||
|
В ЭТОМ ВЫПУСКЕ
слово смотрителю -
Чем меньше женщину мы больше, Всем большое здрасте :-) Наш сегодняшний эпиграф - дань неожиданному провалу Смотрителя в отношениях с одной особой противоположного пола :-) Мдя, вот и веди после этого рассылку - засмеют :-) Очередная пауза в выходе нашего маленького средства общения с тобой, дорогой подписчик, вышла, as usual, ввиду немерянного увлечения Смотрителя разными благами цивилизации, промышленности и природы, кои отвлекают его непоседливый ум от компутера. Тот, соответственно, обижается, уходит в состояние вечного suspend'а, роет ямки на Фострале :-) Из этих ямок потом долго приходится выкапывать знания, параллельно задабривая бедолагу новыми антивирусами да примочками... Но это в прошлом, сейчас Смотритель снова в силе, компутер укрощен и трепещет, посему - будем общаться :-) Сразу, как это ни странно, возникает вопрос: а для кого создана эта рассылка? Судя по выкрикам из зрителного зала, основными её почитателями являются заматеревшие WEB-дизайнеры и программисты, которые не прочь на завтрак разжевать молодого непоседу-Смотрителя, выплюнуть его косточки, смачно рыгнуть и заявить "эх, молодежь!" :-) Дела, а я-то, бедолага, пытался создать рассылку для еще более веселых и задумчивых бегунов-по-сети, коим надоело читать чужое творчество, а хоцца сваять что-нибудь свое, родное :-) Ну да ладно, все одно буду вести манускрипты, пусть даже и для себя, удовлетворяя свою креативную жажду :-) Хотя, как и ранее, буду ждать ваших, мои френды, откликов - прямо тут :-) Но, грех жаловаться, благодаря нашим зубрам, я узнал много пусть и не нового, но полезного и забавного, сиречь интересного о дизайне... и программировании :-) Кстати, чем дальше в лес, тем более угнетает меня мысль, что улетаем мы от темы рассылки - программирования, к теме дизайна... May be, это хорошо, but may be not... Если кто имеет свои мысли по этому поводу - не стесняйтесь :-) Также, многие меня спрашивают, а почему это я юзаю повсюду аглицкие обороты, что я, не русский что ли? Враки и наветы, я русский совсем, так и в паспорте написано :-) Просто проучился 10 лет в спец-школе, где такое было в норме, а старые привычки изгонять ой как трудно... Так что извиняйте, кого коробит :-) Вернемся к нашим зубрам... А точнее - прошу вас лицезреть...
Нет нет, это не то что вы, друзья, подумали... Я не заработался еще до розовых слонов и красных мух перед глазами :-) Просто, ведя рассылку, я познал общение с одним товарисчем1, мнение которого, хоть и расходится с моим, но все же весьма любопытно и поучительно :-) Оный товарисч любезно позволил мне опубликовать нашу с ним переписку, в слегка отредактированном виде, конечно :-) (не мог же я оставлять ненормативную лексику - вмиг кинут :-) ). Более того, он обещал и в дальнейшем делиться со мной и с вами своими необъятными знаниями, что тоже есть очень хорошо и вкусно :-) Все бы так :-) Все, вступление окончено, прошу любить и жаловать - генеральный идеолог тусовки, Кислоедка-Зазнайка :-) Почему его так зовут? Не знаю, видно мама с папой были очень рады его появлению на свет, почему и решили сделать жизнь его прекрасной и удивительной apriori :-) Дизайнерское кредо сего столпа пост-советского Веб-дизайна вы можете найти на www.aai.ee/~vladislav/credo.html, я кстати, нашел :-) Не скрою, не все, что там написано, вызывает у меня бурный восторг и щенячью радость, но, все же, текст довольно дельный, и, наверняка понравится последователям старой школы. Кто с ним согласен, пишите свои отзывы, плиз, сюда, а кто не совсем - тогда вам в эту сторону :-) Перейдем, однако, к конструктивному диалогу, а то что-то нос зачах, да и чесалки приуныли :-)
З: Привет, Смотритель! Твой юмор в рассылке очень мил, конечно, и читать её - одно удовольствие!
С: Привет, Зазнайка, я и сам так думаю :-)
З:
Короче, я не могу понять, что значит "Не
советую использовать в NC 4.x"? Разве разработчик может управлять тем,
какой моделью броузера пользуется пользователь?? Разве только, создав
альтернативные представления и динамически переключая пользователя на
разные варианты страницы...
С:
Ясен перец, читать надо так: "в той части, которая пишется под Navigator".
Вот вот, ты верно догадался, что имелось в виду именно динамический развод
пользователей на разные варианты. Почему? Мне так нравится. Так учился
З:
А ведь все твои советы расчитаны на
Explorer, да и страница твоя персональная в Netscape ну просто
разрушается, как зубы от кариеса... :-))
С:
Ну, скажешь тоже... Это уже не кариес, а самый что ни на есть пульпит...
Если даже не парадантоз... тьфу тьфу ;-)
З:
Да и основы подзабыл...
С:
Признаюсь - и не знал ;-)
З:
Собственно, об этом сразу узнает половина аудитории - та, что не
пользуется Explorer
4 и 5 (всякие там Netscape, Opera, старые модели Explorer)
С:
Ну, тут ты загнул ;-) Едва ли четверть аудитории ;-) И, поверь, это только в
exUSSR четверть электората считается достаточной для проведения выборов, а в
компумире - вряд ли ;-) Хотя, вероятно, я все же сделаю свою страничку
NN-совместимой. Из гордости - я его одолею!
З:
Вот тут ты говоришь при объяснении того, как брать в anchor'ы картинки для того, чтобы юзать события onMouseover и т.д., что бывают такие весельчаки использовать аnchor'ы, как пустой контейнер, не вписывая свойства href, но в NN это не протянет. Так что, пишешь, придется явно и бордерок занулить, а то возникнет вокруг их с Дашенькой кнопочки неприятная синяя рамочка.
Так вот, весельчакам Ванечка бы мог посоветовать вместо убийства href вписать
в тэг <A>
событие OnClick таким образом: OnClick="return false;" - и тогда бы
ссылочка бы сама сдохла, а не вела бы "куда_пойдём_отсюда" к Ванечке на
кулички... :-)) И не говорить о синем цвете рамочки, если цвет её
зависит от установленного цвета ссылок...
С:
Ну, ну, это, конечно, здорово, однако что если наши друзья: Дашенька, Петечка и Ванечка хотели бы без лишнего геморроя (фу ты, пришлось полистать орфографический словарик :)) просто перейти "куда_то_там"? Я просто собирался оставить на их усмотрение, что они будут делать по клику: должна же быть у детей свободная воля? Свободу детям Гондураса: вот что завещал нам великий вождь :)
З:
Оправдываешься, предлоги ищешь, Смотритель... А ведь я говорю именно о
полезном методе исключения _ненужной_ ссылки, который многие не знают (а
знал ли ты, или просто забыл упомянуть? ;-) ) и потому применяют разные
дикие приёмы. С нужной ссылкой всяко нет проблем :-)
С:
Лады, поймал ты меня, не знал, каюсь :-) Кстати, Зазнайка, ты тут разглагольствуешь о цвете рамок, так вот научи, плиз, как это так установить, а то я, сирый, и не знаю :-( Перерыл весь CSS1 на тему "color": и color, и background-color, и border-color, и даже outline-color, найденный в CSS2, не помогли, гады такие :-( Рамочка как была синей, словно мысли танцора из Голубой Устрицы, так и осталась... Это, конечно, я только на недоразвитом IE5 проверял, может что поновее и и поможет :)
З:
Да ты шо, Смотритель?? Зачем рыть так глубоко?? Это _установленный цвет
ссылок_, вот и всё!
<BODY LINK="<твой_любимый_цвет>"> .
Хотел добавить, что то же самое можно сделать с помощью CSS
a:link {color:<твой_любимый_цвет>;} ,
но только что обнаружил, что мой Explorer 4 изменяет таким образом
только цвет текстовых ссылок, а про рамку вокруг изображения забывает и
продолжает использовать параметр из <BODY> или "по умолчанию" (в
Netscape всё в порядке). Баг, разумеется - а заодно полезное открытие
(оказывается, цвет ссылок не стоит устанавливать через листы стилей,
если на странице имеются изображения-ссылки). Скрипт для обхода этого
бага писать лень да и не нужно, раз ссылку можно в <BODY> установить.
С:
Вот дела... Да уж, излишнее увлечение стилями может далеко завести, так что и обратно не выберешься :-) Что ж, будем знать, будем знать :-)
З:
Угу... Кстати, ты тут пишешь кое что про ненавязчивую функцию showmazafaka, и я не совсем понимаю, кто такой what, Смотритель?? Ты не забыл сказать, что переменная what
должна быть глобальной, и что по этой причине функции transferhint ваще
не нужен параметр, а showmazafaka может выводить оную глобальную
переменную?? Ты-то, может, и не забыл, а читатели в недоумении будут, в
недоумении... :-))
С:
Каюсь, каюсь, падшая я женщина :-( Вот что значит лень и проклятый богом Copy'n'Paste :) Этот what остался от исходника, из которого текстуха была пилена. На деле, там, ессесьна, должон стоять параметр функции - hinttext. Что-то я облажался, как Бивис, упавший из манежа на федеральное шоссе... Сенькс за подсказку :)
З:
Кайся, кайся, грешный человек. Налагаю на тебя епитимью воискупление
грехов: пять раза читать исходник перед публикацией - и с внимательно
читать, с благоговением! И, кстати, сокращение DHTML нормальные люди расшифровывают как "Dynamic Hyper Text Markup Language", а не то что ты там написал :-)
С:
А что я написал? А.... "Dynamic Hyper Text Marking Language" :-( То-то мне и казалось, что звучит как-то не так... Вот что значит писать рассылку будучи не совсем трезвым :-) Надо исправляться - беречь почки :-)
З:
Вот-вот :-)
С:
Лады, сенькс за советы :-) Как хорошо, что я называюсь смотрителем, а не Учителем. Мне и советы слушать не совестно... Учи учась - девиз юных сурков, и следовать ему почетно :-)
З:
Удачи тебе, Смотритель! А я за тобой приглядывать буду, как бы ты ещё
не набедокурил... :-)))
С:
Ну, это лишнее :-) Пока :-)
Итак, други, что же мы выяснили из этого остроумного диалога? Вот маленький итог:
Теперь, ставшее уже традиционным,
Нельзя сказать, конечно, дорогие мои детишечки, что моя дырявая шапочка лопается от ваших письмишек, но кое что там завалялось. Вот, к примеру, пишет нам Кешенька... Кешенька: По-поводу браузеров. ИМХО IE5 - рулез. Туповат IE конечно, но что делать... Вообще, я бы поставил как основного конкурента IE Оперу. Легкий (памяти мало просит), куча фишек. Но опять таки при работе постоянно лезут всякие недоделки (например не поддерживается VBScript), которые не позволяют использовать его для повседневной работы. :+( ответ Кешеньке По поводу IE5, друг мой, я с тобой согласен совершенно. А вот насчет Оперы... Подумав, что такой прогрессивный мальчик как ты не может ошибаться, я быстрее самой быстрой австралийской черепахи кинулся на сервер свежего шароварно-фриварного софта и слил оттуда еще сочащуюся от своей новизны Оперу 4.0. Пуская слюни от предвкушения чуда я проинсталлил её на поледние метры своего маленького винта, запустил и - о горе, получил такое неудовлетворение, что, боюсь, оно перешло уже в перманентную хроническую фазу, и удовлетворения мне больше в жизни не видать :-( Ни на одной из ХТМуЛин, что с давних времен пылятся у меня, не включился русский шрифт. Лады, такой закаленный боец, как Печкин, не боится трудностей. Он смело лезет в меню, тщась найти там что либо вроде View->Encoding или чего-либо в том же духе. Напрасно :-( Либо его там нет совсем, либо оно настолько хорошо запрятано, что только неугомонно-бодрый Шерлок Холмс при поддержке отличающегося острым нюхом доктора Ватсона может его найти. Я - нет :-( Если кто-нибудь, кстати, отличился стол хорошим зрением, или столь обширными познаниями, что опознал решение данной проблемы, плиз - поделитесь знанием Дальше больше. Возникают довольно недетские проблемы со скриптами - даже с JS :-( Полное исследование пока не проведено, однако уже сейчас видны многие еггоги :-) Есть и плюсы: CSS1 поддерживается весьма неплохо, правда возникали "маленькие неприятности" (Опера, к примеру, не переваривает пробелов между числами и единицами измерения: font-size:16 pt - не катит, а font-size:16pt - катит) Еще, что мне понравилось - при загрузке в окно браузера не ХТМыЛа, а одинокой картинки, отступы слева-сверху отсутствуют. Это прикольно :-) Одним словом - продуктецъ сыроват, но перспективы есть :-) Кстати, если кто еще хочет поделиться своим мнением с narod'ом, то прошу :-)
Помнится, в заключение прошлого выпуска, который остался в настолько далеком прошлом, что даже убеленные сединами старики далеких гор не помнят его, Смотритель обещал показать пример чего-либо совсем динамичного :-) Вот зараза! Обещал, а мне отдуваться :-) Ведь Смотритель - это я :-) Ладно, что делать, покажу... Сразу оговорюсь, пример работает только под IE4+, соответственно, поклонники NN и Opera - можете готовить гнилые помидоры, мне все равно - я в домике :-) Это не оттого что я лентяй, нет, я честно старался... В конце я расскажу, почему же ничего не вышло :-( Итак, что за задумка просочилась в мой отягощенный бесполезными знаниями мозг? А задумал я посадить в небольшую виртуальную хатку нескольких уже полюбившихся Петечке, Машенька, Дашеньке и всем-всем-всем персонажей, и заставить их плясать под свою дудку :-) Что ж, замысел достаточно злобен, грех не претворить его в виртуальную жизнь :-) Подготовим сперва сцену, ибо артист без сцены, как мужик без спичек... Сначала надо нарисовать хатку-пятистенку. Когда я хотел чтобы пример работал под всеми тремя браузерами, я делал это таблицей, но, после, откинув двух аутсайдеров, остановился на рисование хатки div'ом. Так, где-нибудь внутри body напишем:
<div style="position:absolute;
top:0px; left:0px; width:464px; height:364px;
background-color: #ffefbf;
border: 1px solid black">
</div>
Вау, круто!!! Получилось весьма стильно, стилями набито как мехос ядробусами после нашествия Модного Гири2. So, ни на йоту ни уклоняясь от CSS1 и рекомендаций W3C по HTML4.0, мы нарисовали маленькую хибарку в левом-верхнем углу. Кратенько - что здесь что :-)
position: absolute делает сразу целую грядку вещей. Во-первых, этот стиль выключает элемент, который он описывает, из нормального потока отображения браузером, то есть все остальные элементы будут отрисованы так, будто этого элемента и не было в природе :-) Во-вторых, элемент привязывается к левому-верхнему углу своего родительсткого элемента, и теперь его позиция не зависит от остальных элементов одного с ним уровня, а определяется стилями top и left. Мамочка моя, это уже совсем похоже на обычное программирование! Напомню заодно, что стиль position может принимать также значения static, relative (СSS1) и fixed (CSS2), но об этом как-нибудь в другой раз :-) Еще одно совсем маленькое отступление насчет браузеров (маленькое, как же :-)) : IE4 не поддерживает position: absolute для списков, гиперссылок, и ячеек таблиц. Кроме того, чтобы позиция элеметов отсчитывалась от родителского элемента, его стиль position тоже должен быть задан как absolute, или же как relative, иначе положение элемента будет рассчитываться относительно верхнего-левого угла окна браузера :-). В NN4.х стиль position: absolute работает для гиперрсылок, но делает их неюзабельными. Также NN4.x не умеет так позиционировать img'и, соответственно их надо обрамлять какими-нибудь парами поддерживающих стиль тэгов, например <a></a> или <span></span>. Плюс ко всему, при указании стиля position:absolute NN4.х всегда отсчитывает позицию относительно верхнего-левого угла окна браузера, то есть самого себя :-) top:0px; left:0px выводят нашу хатку в самый левый верхний угол окна браузера. Зер гут! Почему я сделал так? Чтобы потом легче привязывать ручных зверьков, которых я собираюсь в хатку запустить :-) width:464px; height:364px задают размеры хатке - по горизонтали и вертикали. Размеры кажутся высосанными из пальца? Так оно и есть :-) Стоит упомянуть, что NN не поддерживает стиль height, поэтому если там надо вставить некий элемент с фиксированным размером по вертикали, то стоит подумать об использовании для этого таблицы :-) background-color: #ffefbf задает цвет фона для элемента. Та абракадабра, что написана после символа [ # ] (колыма) есть, как говорил известный мыслянт и мудролюбец ослик Иа, мой любимый цвет. Про любимый размер говорить не буду, уж больно пошлостью отдает :-) И как такое детишкам показывают в мультфильмах? :-))) Опять же, наш добрый "друг" NN накладывает свою тяжелую лапу на использование этого стиля, не заполняя цветом фона облать рамки элемента (о ней - дальше) и области padding'а (как это по-русски, я еще не придумал) border: 1px solid black создает тонкую черную рамку вокруг нашей новой хатки... Вообще, синтаксис стиля border выглядит так: border [толщина] [тип] [цвет]. Фазамаза, чувствую, слишком я далеко зашел, чтобы теперь отсупать, расскажу уж и о толщине-типе-цвете :-))) So... Толщина рамки. Соответсвтующий ей отдельный стиль - border-width. Зачем она нужна? Ну это просто. Возможно, ты, дружок, известный Веб-программист, имеешь кучу бабок, шестисотый, виллу в на итальянской Ривьере, к тому же, не прочь похавать :-) Тогда и рамочкам твоим следует быть толстыми как трансатлантический кабель... Но вдруг ты фанат гербалайфа? Попробуй тогда рамку-худышку, тебе понравится, обещаю :-) Толщина рамки может принимать вот такие зачения:
Тип рамки может также задаваться и стилем border-style. Нужен, чтобы разнообразить рамки на своей страничке, нарисовать бодрейших выпуклостей и впуклостей, детских песочниц и бравых молочниц :-) Ну, про молочниц я соврал, наверное, хотя, с этими каскадными листами стилей всякое возможно :-) Вот какие бывают типы рамок:
Цвет рамки задает её цвет. Удивительно, не так ли? Я и сам поначалу удивлялся этому так долго, что пропустил очередной выпуск любимого мультфильма про Винни-Пуха ;) Единственное, о чем здесь стоит упомянуть, так это то, что градиенты цветов, используемых в рамках типа groove, ridge, inset и outset рассчитываются как раз от этого стиля, так что не стоит выбирать его в таком случае черным, если, конечно, ты, май френд, не пишешь страницу про стадное поведение негров в августовскую ночь :-) Итак, хатка создана и с легкостью наблюдается под двумя браузерами - IE и Opera :-) Старичок-лесовичок NN ушел по грибы... (уворачиваясь от гнилых помидоров)... я же предупреждал! Теперь хатку надо населить динамичными зверками. Поэтому внутри хатки, то бишь меж парой тэгов <div></div> напишем: <img src="images/exie.gif" id="dummy" style="position:absolute; top:40px; left:40px"> Так, я поселил в хатку малыша Ё-моё. Он символизирует собой непреходящую мощь мелкософта и его конкретного представителя - БГ. Как я уже говорил, пример написан под IE, поэтому я и использую стиль position: absolute напрямую для img'а. Сейчас зверок еще не совсем динамичен - спит в левом верхнем углу хатки, поэтому к нему без опаки можно подселить второго зверка: <img src="images/exnc.gif" id="sinny" style="position:absolute; top:8px; left:200px"> Это Наш Рулевой, который всегда дремлет внутри былинного богатыря NN. Жаль только, что не ладит он с Ё-моё, потому придется подселить к ним и третьего, дабы могли спокойно расписать пульку не отвлекаясь на разные шалости... Из-за бедности моей фантазии зовется он просто Попрыгунчик-Злыдень. Попрыгунчик, потому как по сценарию моему он должен будет прыгать, а Злыдень - потому как потратил я на его рисование всего 2 минуты, получился он кривой и кособокий ;-) Вот он: <img src="images/man.gif" id="manny" style="position:absolute; top:300px; left:200px"> Вот что у нас окончательно вышло... 
Наконец-то! Все существа помещены в хатку и, пока что, давят массу в люле. Пора их будить отменной порцией ЖаваСкрипта, не так ли? Так! Well, откроем блок SCRIPT и начнем объявлять переменные... <script language="javascript"> h_position=41; //текущее положение Ё-моё по X v_position=41; //текущее положение Ё-моё по Y h_direction=4; //проекция скорости Ё-моё по X v_direction=2; //проекция скорости Ё-моё по Y phase=0; //фаза движения других зверей Тут вроде бы должно быть все понятно даже Хрюше со Степашкой, но все же скажу пару слов. По злым наветам Отца Вындоуза я решил заставить Ё-моё двигаться по типу биллиардного шара, Нашего-Рулевого - по эллипсоиде, а Попрыгунчика-Злыдня - прыгать по хатке, как Мартовского Зайца... Биллиардные шары обычно движутся линейно, для такого движения характерно описание двумя векторами - положения и скорости. Эллипсоида характеризуется одной переменной величиной - фазой, прыжки же выполняются по закону модуля синуса, что тоже вполне характеризуется фазой. Вот чем и оправдан такой выбор переменных, а вовсе не моими личными пристрастиями к рыбному меню :-) O'key, пора создавать движительную функцию... Вот так:
function movedummy() //движительная функция
{
Название, как и всегда, весьма ненавязчиво и не заставляет думать о судьбах мира и бедности угнетенного чернокожего населения Америки :-) Теперь анимируем Ё-Моё: //проверка на достижение границ хатки и изменение вектора скорости по необходимости if ((v_position==297)||(v_position==1)) v_direction*=-1; if ((h_position==397)||(h_position==1)) h_direction*=-1; //изменение вектора позиции на величину вектора скорости v_position+=v_direction; h_position+=h_direction; //задание позиционирующих стилей HTML-объета dummy.style.top=""+v_position+"px"; dummy.style.left=""+h_position+"px"; Вот так - в первых двух строчках проверяется, не достиг ли Ё-моё границ хатки, и, если достиг, то соответствующая составляющая вектора скорости меняет свой знак. Почему были выбраны такие величины для границ оставлю догадываться вам, друзья. Кто догадался - пишите, реквизиты самых догадливых я могу и опубликовать ;-) Вторая пара строк самодостаточна и очевидна, а вот о третьей стоит и поговорить :-) Почему бы просто не присвоить стилям dummy величины составляющих вектора позиции? А вот почему: дело в том, что все стили по сути - это строковые данные, содержат как цифры так и буквы, а надеяться на корректный перевод браузером числа в строку весьма самонадеяно. Поэтому я принудительно привожу число к строке прибавлением его к пустому стрингу - "". Теперь можно быть уверенным, что все пройдет как надо ;-) Кстати, я тут смело разглагольствую о строках, переменных и т.п., даже не задумываясь, а всем ли понятен синтаксис... Если кому-то что-то неясно, проведу маленький ликбез ;-) В принципе, Жаваскрипт весьма похож синтаксисом на Си, и вот что означают конкретные значки :
Тут я описал, ессесьна, не все значки, которые могут встретиться в Жаваскрипте, а только те, что встретились в этом примере ;-) Вообще, если кому-то действительно это интересно и надо, я могу ввести и рубрику с каким-нибудь хитрым названием "Зароемся в Скрипты" к примеру :-) Надо? - попросите, я не кусаюсь, если только самую малость :-) Ладно, настало время и для Нашего Рулевого начать рулить:
//вычислим позицию рулевого при текущей фазе
x=Math.cos(phase)*160;
y=Math.sin(phase)*100;
//прирастить фазу
phase+=3.1415926/60;
//задание позиционирующих стилей HTML-объета
sinny.style.top=""+(150+y)+"px";
sinny.style.left=""+(200+x)+"px";
Кто читал в внимал, тот верно уже все понял :-) Необычным может только показаться синтаксис вычисления тригонометрических фунrций, но это не я так придумал, и не Крокодил Гена тоже. Просто наши веселые друзья, создававшие первую версию Жаваскрипта, когда-то были очень увлечены объектами и придумали объект Math, который занимается всеми "сложными вычислениями" :-) Пусть им, спасибо что не засунули в него еще и операции типа плюс и минус... А ведь могли бы :-) Что сказать еще? Число Пи я помню только до седьмого знака, не обессудьте :-) Самые математики уже догадались, что за одну итерацию Наш Рулевой сдвигается ровно на три градуса, значит где-то к тринадцатому шагу его уже нужно будет закусывать :-) Для тех, кто выяснил что означают остальные числа в записи предлагаю те же бонусы, что и для более ранних-догадливых. За бонусами - сюда... Третий участник нашей пульки еще спит? Не дело, подъем! //формула движения Попрыгунчика-Злыдня y=Math.abs(Math.sin(phase)*300); //задание позиционирующих стилей HTML-объета manny.style.top=""+(300-y)+"px"; Все еще более примитивно - скажу лишь, что метод abs объекта Math вычисляет модуль своего параметра. Таким образом, человечек движется только в области положительных координат. Ура, все наши герои уже сделали по шагу, осталось заставить их шагать и дальше - весело, задорно, с бойкими песнями пионеров шестидесятых ;) Это длается так:
setTimeout("movedummy()",10);
Как говорится, не просто, а очень просто. Для тех, кто по уважительным причинам пропустил прошлый выпуск рассылки расскажу: функция setTimeout("действие",интервал) устанавливливает действие на выполнение по истечении интервала. Интервал - это время в миллисекундах, действие - обычно вызов какой-нибудь функции, хотя и необязательно. Таким образом мы заставим эту же самую функцию вызваться через 10 миллисекунд, правда? А вот и нет! Браузер - существо неповоротливое, и вряд ли сможет так быстро работать. Но вдруг кто-то из пользователей обзавелся гигагерцовым процессором и видеокартой быстрее, чем полет фанеры над Парижем? Пусть насладится :-) Ну вот, пришла пора закрыть и функцию, и блок SCRIPT: } </script> Чудно! Осталось вызвать функцию движения трех чудаков в первый раз, что мы и проделаем, повесив её на событие onLoad тэга body. Вот так: <body onLoad="movedummy()"> И, voila! Посмотреть, что у нас получилось (если, конечно, дружок, ты имеешь неограниченный доступ к своему IE) можно нажав прямо сюда, не боясь получить заразный вирус типа грыппа :-) А вот полный текст исходника, который мы так долго обсасывали со всех сторон:
<html>
<head>
<title> Ё-мое, Наш Рулевой и Попрыгунчик-Злыдень </title>
<script language="javascript">
h_position=41;
v_position=41;
h_direction=4;
v_direction=2;
phase=0;
function movedummy()
{
if (( v_position==297 ) || ( v_position==1 )) v_direction*=-1;
if (( h_position==397 ) || ( h_position==1 )) h_direction*=-1;
v_position+=v_direction;
h_position+=h_direction;
dummy.style.top=""+v_position+"px";
dummy.style.left=""+h_position+"px";
x=Math.cos(phase)*160;
y=Math.sin(phase)*100;
phase+=3.1415926/60;
sinny.style.top=""+(150+y)+"px";
sinny.style.left=""+(200+x)+"px";
y=Math.abs(Math.sin(phase)*300);
manny.style.top=""+(300-y)+"px";
setTimeout("movedummy()",10);
}
</script>
</head>
<body bgcolor="#7f7f7f" onload="movedummy()">
<div style="position:absolute;
top:0px; left:0px; width:464px; height:364px;
background-color: #ffefbf;
border: 1px solid black">
<img src="images/exie.gif" id="dummy" style="position:absolute; top:41px; left:41px">
<img src="images/exnc.gif" id="sinny" style="position:absolute; top:8px; left:200px">
<img src="images/man.gif" id="manny" style="position:absolute; top:300px; left:200px">
</div>
</body>
</html>
Чудесно, правда без моих веселых комментариев. Ну, это поправимо - присылайте мне свои веселые комментарии. Если же кто-то хочет поэкспериментировать или поизучать сие творение в оффлайне, можете скачать его к себе на компутер. Ну вот, наше сегодняшнее "немного по теме" превратилось в "много по теме", ну и ладно. Что вам рассказать в следующей рассылке? Спрашивайте!
Как я уже упоминал где-то, я не гений, хотя и близок к нему ;-) От такого почетного звания меня отделяет только большое незнание многих вопросов, ответы на которые я просто жажду получить. Верю, что и вы тоже. Так как эта рубрика новая, то сегодня вопросы умненьким читателям я задам сам, а, в дальнейшем, прошу - присылайте и вы свои конкретные вопросы. Если я смогу ответить, я отвечу, если нет - вынесу на всеобщее обсуждение. Договорились? ;-) Итак, вот сегодняшние вопросы:
Вроде хватит вопросов на сегодня, лады? :-)
В заключение скажу, что, несмотря на то, что неделька выдалась для меня довольно напряженной - я настраивал кафедральный сервер, выпуск рассылки получился довольно объемным :-) Это хорошо, ибо потратил я на него всего три дня, работая примерно по два часа в день :-) Такие темпы наводят на мысль, что следующие выпуски будут выходить не совсем редко. Ура мне! Ура мне два раза :-) Вот еще что, в преддверие праздника всех железнодорожников - а он будет в воскресенье, 6 августа, я предлагаю вам всем, дорогие друзья и товарисчи, сделать своим знаком подарок. Какой? Хехе :-) Подпишите их на эту рассылку, вот приятно удивятся-то, бедолаги, когда к ним будет приходить такое занимательное чтиво :-) Как это сделать? Проще, чем два пальца... растопырить: Что сказать ишшо? Как видите, слегка поменялся дизайн, добавилось оглавление, новые рубрики. Хорошо это или плохо - решать вам ;-) Я, со своей стороны, делаю все, чтобы рассылка стала действительно полезной. Все, Бог с вами, золотые рыбки, не скучайте без Смотрителя :-) Sincerely yours, Смотритель 1товарисч - это слово было придумано не мной, оно - плод фантазии автора одного из самых блестящих переводов романа Р.Хайнлайна "Луна жестко стелет"
|
| ||||||||||||||||||||
| ||||||||||||||||||||||
