Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Плавная смена картинок управляемая кнопками 
:(
    Опции темы
Ghirik
Дата 21.9.2007, 01:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20



Собственно, скриптик.... только что из печки.... Кэширования картинок нет, потому в IE дергается.
Код

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>slideShow</title>
<script language="javascript">
<!--
a=5
t=6    //Время плавного появления/исчезновения
r=10    //Номер старшей картинки, нумерация начинается с 0.jpg, по умолчанию папка с картинками - img
a_i=new Array()
    for(c=0;c<=r;c++){
        a_i[c]=new Image()
        a_i[c].src='img/'+c+'.jpg'}

$=function(id){return document.getElementById(id)}

function slide_click(new_img){
        $('B1').disabled=true
        $('B2').disabled=true
    for    (var c=99;c>=0;c--){
        setTimeout(function (c,n){return function(){sets(c,n)}}(c,new_img),t*(100-c))}
    }
function sets(c,n){
    if    (c==0){
        $('slide').src=n.src
    for (c=1;c<=100;c++){
        setTimeout(function (c,n){return function(){sets(c,n)}}(c,n),t*c)
    if    (c==100){$('B1').disabled=false;$('B2').disabled=false;return}}
    }
    if    ($('slide').filters){
        $('slide').style.filter='alpha(opacity='+c+')'}
    else{
        $('slide').style.opacity=c/100}
    }
//-->
</script>
</head>
<body>
<br><img src=img/0.jpg id=slide align="left">
<input id="B1" type="button" value="Вперед" onclick="slide_click(a_i[a+=1])">
<input type="button" value="Назад" id="B2" onclick="slide_click(a_i[a-=1])">
</body>
</html>


Это сообщение отредактировал(а) Ghirik - 21.9.2007, 01:22


--------------------
Отдадим всё клиенту, пускай его машина мучается...

PM MAIL   Вверх
dstorm81
Дата 21.9.2007, 08:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


бездельник
***


Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

Репутация: 20
Всего: 39



Кэширования картинок нет, потому в IE дергается.

все дружно должны порадоваться?
я рад ;-)

Это сообщение отредактировал(а) dstorm81 - 21.9.2007, 09:25


--------------------
на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)

PM   Вверх
dsCode
Дата 21.9.2007, 10:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 565
Регистрация: 8.9.2007
Где: Saint-Petersburg

Репутация: 19
Всего: 26



Ghirik, хороший скрипт =) думаю, пригодится в качестве примера, особенно новичками (только, если будете оформлять в виде примера/урока, - было бы хорошо написать все по стандартам, включая отступы и т.д., а так же имена переменных (осознанные, а не "a", "c", "r", намного удобней было бы "changeTime" вместо "t") и функций. Стандартизованный код и читать понятней (и приятней)). И можно в урок выкладывать =)

Это сообщение отредактировал(а) dsCode - 21.9.2007, 10:58


--------------------
the .code inside
:my music
PM MAIL WWW ICQ Jabber   Вверх
Ghirik
Дата 21.9.2007, 12:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20



Цитата

Кэширования картинок нет, потому в IE дергается.

Просто сделать просили в соседней теме, под определенную задачу, для той задачи не нужно було кэшировать.

Цитата

было бы хорошо написать все по стандартам



dsCode, если не затруднит, переформатируйте пожалуйста по правилам, а то я не особо их знаю. smile на своём скрипте мне будет понятнее как нужно.

А для законченности скрипта, чуть позже, добавлю кэширование.


--------------------
Отдадим всё клиенту, пускай его машина мучается...

PM MAIL   Вверх
dsCode
Дата 21.9.2007, 13:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 565
Регистрация: 8.9.2007
Где: Saint-Petersburg

Репутация: 19
Всего: 26



Ghirik, что-то вроде этого:

Код

<script type="text/javascript">

  a = 5; // ! эта переменная тут зачем? Она не используется в коде
  
  var changeTime = 6; //Время плавного появления/исчезновения
  var parentPicNumber = 10; //Номер старшей картинки, нумерация начинается с 0.jpg, по умолчанию папка с картинками - img

  // можно и new Array(), но [] - удобней и быстрее,
  // а главное - профессиональней (не знаю, правильное утверждение или нет, но на мой взгляд - это так)
  var imagesArray = [];

  for (var c = 0; c <= parentPicNumber; c++) {
    imagesArray[c] = new Image();
    imagesArray[c].src = 'img/' + c + '.jpg';
  }

  /**
   * ну и немаловажны правильно оформленные комментарии
   * function gets object by id
   * можно указать параметры и возвращаемое значение
   * @param String id
   */

  $ = function(id) {
    return document.getElementById(id);
  }

  function slideСlick(newImg) {
    $('B1').disabled = true;
    $('B2').disabled = true;
    for (var c = 99; c >= 0; c--) {
      window.setTimeout(function (c, n) {
        return function() {
          sets(c, n);
        }
      }(c, newImg), t * (100 - c));
    }
  }

  function sets(c, n) {
    if (c == 0) {
      $('slide').src = n.src;
      // кто такой тут "с" в цикле? Переопределение параметра? 
     // Если просто счетчик цикла, то надо делать локальным:
     // var c, а не просто c
      for (c = 1; c <= 100; c++) {
        window.setTimeout(function(c, n) {
          return function() {
            sets(c, n);
            return true;
          }
        }(c, n), t * c);
        if (c == 100) {
          $('B1').disabled = false;
          $('B2').disabled = false;
          return;
        }
      }
    }
    if ($('slide').filters) {
      $('slide').style.filter = 'alpha(opacity=' + c + ')'
    } else {
      $('slide').style.opacity = c / 100;
    }
  }

//-->
</script>


Основные правила:

1. Всегда ставьте точку с запятой (пусть для js это не обязательно, но если Вы ее ставите - это признак хорошего тона).

2. Правильные отступы (во многих языках принято делать 2 или 4 отступа. В JavaScript, я, например, привык ставить 2 (исходя из кода больших фрейморков, да даже, если посмотреть js-фалы мозилы - там тоже 2 отступа. Хотя многие ставят 4 - это тоже правильно)). Кстати, есть такой замечательный язык как python, так вот там - отступы - это принудительное (и правильно!) правило. Если Вы ошибетесь с количеством отступов в строке - компилятор выдаст ошибку. Да и еще - никаких табов - все табы должны быть преобразованы в пробелы (потому что в Вашем редакторе табуляция может быть 2 символа, а в чьем-нибудь другом - 4 - и получится бредятина).

3. if ... else.. конструкции пишутся именно так, как в примере выше.

4. после знака припинания и разделителей всегда ставится пробел (for (var i = 0; i < 10; i++) а не for(var i=0;i<10;i++)).

5. Открывающая скобка блока или функции "{" может быть либо в той же строке, либо в новой. Это дело привычки (я привык всегда ставить в той же). Кстати, когда скобка ставится в новой строке - это "Классический способ", а если в той же - "Единственно верный" (название Денниса Ричи, одного из создателей языка Си).

6. имена переменных и функций начинаются с маленькой буквы, слова разделяются заглавными буквами: т.e. так myVar, myFunction(), а не my_var, my_function

7. Константы всегда пишутся большими буквами и разделяются подчеркиванием: MAX_VALUES, MIN_RANGE и т.д.

8. Внутри циклов нужно объявлять локальные переменные (они уничтожаться по выходу из блока), т.е. for (var c = 0...), а не for (c=0)...

Ну и т.д. Поищите нотации и документации по оформлению кода. Потому что неправильно оформленный код (даже, если Вы достигли уже больших успехов), всегда будет выдавать непрофессионала.

Это сообщение отредактировал(а) dsCode - 21.9.2007, 13:15


--------------------
the .code inside
:my music
PM MAIL WWW ICQ Jabber   Вверх
AKS
Дата 21.9.2007, 15:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Участник форума
**


Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 27
Всего: 52



Цитата(dsCode @  21.9.2007,  13:07 Найти цитируемый пост)
эта переменная тут зачем? Она не используется в коде

Код

onclick="slide_click(a_i[a+=1])"



Цитата(dsCode @  21.9.2007,  13:07 Найти цитируемый пост)
Внутри циклов нужно объявлять локальные переменные (они уничтожаться по выходу из блока)

Уничтожаться по выходу из блока???

Цитата(Ghirik @  21.9.2007,  01:14 Найти цитируемый пост)
Собственно, скриптик.... только что из печки....

200 вызовов window.setTimeout и столько же вызовов анонимных функций для создания первого параметра в setTimeout - это не слишком много для одного преобразования?

PM MAIL   Вверх
dsCode
Дата 21.9.2007, 16:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 565
Регистрация: 8.9.2007
Где: Saint-Petersburg

Репутация: 19
Всего: 26



AKS, насчет переменной "а" - не заметил =) Ну это ерунда.


Цитата(AKS @  21.9.2007,  15:42 Найти цитируемый пост)
Уничтожаться по выходу из блока???


А что такое тройное удивление? Вообще (не касаемо конкретно JavaScript'a) - да, так оно и есть. Жизнь переменной определена ее блоком. С JavaScript'ом - да, ступил, переменная видна после цикла. Но в любом случае, если дело происходит в контексте функции, то использование в цикле var не "засорит" window по выходу из функции.

Это сообщение отредактировал(а) dsCode - 21.9.2007, 16:29


--------------------
the .code inside
:my music
PM MAIL WWW ICQ Jabber   Вверх
AKS
Дата 21.9.2007, 16:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Участник форума
**


Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 27
Всего: 52



dsCode, 
Цитата
А что такое тройное удивление?

Просто подумал: "Неделю назад Ziroglif очень подробно рассказывал о жизни переменных"...

Ghirik,  вот так:
Код

onclick="slide_click(a_i[a+=1])"

возникает ошибка, если a становится < 0 или >= a_i.length...

Это сообщение отредактировал(а) AKS - 21.9.2007, 16:36
PM MAIL   Вверх
dsCode
Дата 21.9.2007, 16:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 565
Регистрация: 8.9.2007
Где: Saint-Petersburg

Репутация: 19
Всего: 26



AKS, 
Цитата(AKS @  21.9.2007,  16:34 Найти цитируемый пост)
Просто подумал: "Неделю назад Ziroglif очень подробно рассказывал о жизни переменных"...

ладно, к словам не будем придираться, я говорил об оформлении кода в целом - это не только JavaScript'a касается =) Вот и упомянул, что локальная переменная уничтожится после выхода из блока (во всяком случае, в Си так). Да и в JavaScript так =) только вот цикл для нее - не "жизненный блок" получается, переменная объявляется в контексте функции и принадлежит функции (Variable Object функции, если точнее, но это не суть уже) =)


--------------------
the .code inside
:my music
PM MAIL WWW ICQ Jabber   Вверх
Ghirik
Дата 21.9.2007, 17:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20



Всем большое спасибо!
Стало все понятно по форматированию. Впреть, обещаю выкладывать только нормально форматированный код.  smile  smile 
На самом деле мне не нравится растягивать код по вертикали, читаемость лучше, но анализировать работу кода неудобно. Приходится постоянно крутить колесо мышки, туда-сюда. Но попробую... Может и привыкну. 
Код

onclick="slide_click(a_i[a+=1])"

это я так... вообще, не думая.... smile торопился человеку ответить, ему нужно было только показать, кнопки у него свои.... Так то, можно конечно и по кругу картинки пустить. Наверно так и сделаю....


--------------------
Отдадим всё клиенту, пускай его машина мучается...

PM MAIL   Вверх
Zeroglif
Дата 21.9.2007, 18:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 644
Регистрация: 22.9.2005

Репутация: 28
Всего: 66



Цитата(Ghirik @  21.9.2007,  18:48 Найти цитируемый пост)
обещаю выкладывать только нормально форматированный код.

Это хорошо. Вот здесь были собраны ссылки "про стиль" по результатам небольшого обсуждения на dklab-e. 
PM MAIL WWW   Вверх
cruelangel
Дата 21.9.2007, 20:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 319
Регистрация: 12.9.2007

Репутация: 4
Всего: 8



>Всегда ставьте точку с запятой (пусть для js это не обязательно, но если Вы ее ставите - это признак хорошего тона).

ничего подобного. точкусзапятой лучше по возможности не ставить.

приведу пример:
Код
text= text
    .replace( /<br\/?>/gi, '\n' )


теперь мы можем добавить ещё один фильтр просто приписав его в конце..
Код
text= text
    .replace( /<br\/?>/gi, '\n' )
    .replace( /<[^<>]*>/g, '' )


если же нам придётся закомментить один из фильтров - достаточно просто его закомментить:
Код
text= text
//    .replace( /<br\/?>/gi, '\n' )
    .replace( /<[^<>]*>/g, '' )


точкисзяпятой же превращают редактирование в каторгу.


>в Вашем редакторе табуляция может быть 2 символа, а в чьем-нибудь другом - 4 - и получится бредятина

в случае отступов - ничего подобного. бредятина получается только в случае выравнивания участков строк табами. 


>после знака припинания и разделителей всегда ставится пробел (for (var i = 0; i < 10; i++) а не for(var i=0;i<10;i++)).

такой вариант смотрится ещё лучше: for( var i= 0; i < 10; ++i )


>локальная переменная уничтожится после выхода из блока (во всяком случае, в Си так

касательно конструкции for( int i=0; i < limit; ++i ) - будет ли i являться локальной для цикла, а не для функции - зависит от компилятора. 
PM MAIL   Вверх
dsCode
Дата 21.9.2007, 21:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 565
Регистрация: 8.9.2007
Где: Saint-Petersburg

Репутация: 19
Всего: 26



cruelangel, 
Цитата(cruelangel @  21.9.2007,  20:53 Найти цитируемый пост)
точкусзапятой лучше по возможности не ставить.


Цитата(cruelangel @  21.9.2007,  20:53 Найти цитируемый пост)
точкисзяпятой же превращают редактирование в каторгу.


в данном случае основная речь о правильности оформления (правильность в этическом плане, поскольку точка с запятой - не обязательна). Ради Бога, комментируйте, только хорошо бы (в конце!) поставить точку с запятой:

Код

text = text
//    .replace( /<br\/?>/gi, '\n' )
    .replace( /<[^<>]*>/g, '' );


P.S. [1]: покажите мне хотя бы 50 человек, которые отрицают точку с запятой. Я покажу Вам 100, которые говорят о точке с запятой - почти как об обязательной сущности в javascript (опять же из этических соображений). Вообще, мои утверждения основываются на programming style guide'ах. Придерживаться или нет - Ваше дело. 

Цитата(cruelangel @  21.9.2007,  20:53 Найти цитируемый пост)
в случае отступов - ничего подобного. бредятина получается только в случае выравнивания участков строк табами.

на своей практике видел код, который редактировался в терминале в линухе - там смешались табы и пробелы - в EmEditor'e (редактор такой типа блокнота - кстати, хороший, им пользуюсь) потом сплошная каша получилась.

P.S. [2]: опять же - любой style guide порекомендует включить функцию "Преобразовывать табы в пробелы" в Вашем редакторе.

Цитата(cruelangel @  21.9.2007,  20:53 Найти цитируемый пост)
такой вариант смотрится ещё лучше: for( var i= 0; i < 10; ++i )

уф = ) устал ссылаться на style guide, но еще чуть-чуть =)) - после for - нужен пробел, после var i - нужен пробел.

Цитата(cruelangel @  21.9.2007,  20:53 Найти цитируемый пост)
касательно конструкции for( int i=0; i < limit; ++i ) - будет ли i являться локальной для цикла, а не для функции - зависит от компилятора.

не спорю, возможно и так (но в большинстве, которые я видел - переменная i - "исчезнет" после выхода из цикла). Приведите пример компилятора, о котором Вы говорите.


Это сообщение отредактировал(а) dsCode - 21.9.2007, 21:31


--------------------
the .code inside
:my music
PM MAIL WWW ICQ Jabber   Вверх
Ghirik
Дата 21.9.2007, 21:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20



Сейчас занялся доработкой этого скриптика, блин(!) не узнаю свой код smile  smile 
Действительно, так отформатированный код приятно читать. Осталось только привыкнуть так форматировать самому... Я экономил буковы, чтобы текст получался меньше размером, интерпритатор всё же. А если использовать последующее сжатие, то усе путем. smile 


--------------------
Отдадим всё клиенту, пускай его машина мучается...

PM MAIL   Вверх
cruelangel
Дата 21.9.2007, 22:02 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 319
Регистрация: 12.9.2007

Репутация: 4
Всего: 8



> Ради Бога, комментируйте, только хорошо бы (в конце!) поставить точку с запятой:

а при перекомментировании - не забыть перенести точкусзяпятой в нужное место... 


>Вообще, мои утверждения основываются на programming style guide'ах. 

я уже устал убеждать людей думать своей головой...  smile 


>уф = ) устал ссылаться на style guide, но еще чуть-чуть =)) - после for - нужен пробел, после var i - нужен пробел.

а обосновать сможешь, почему он там нужен?


>не спорю, возможно и так (но в большинстве, которые я видел - переменная i - "исчезнет" после выхода из цикла). Приведите пример компилятора, о котором Вы говорите.

msvc, емнип

Добавлено через 43 секунды
Ghirik, не экономь на спичках smile 
PM MAIL   Вверх
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.0654 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.