VPF::Пермещение картинки при прокрутки скроллинга

Noodly

Дата 12.9.2009, 20:21 (ссылка)

(нет голосов)

Загрузка ...

Новичок

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

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

Помогите пожалуйста, умные люди!
Мне нужно, чтоб картинка всегда отображалась в углу экрана, даже при прокрутке скроллинга.
Вот написал код, но картинка опускается в угол только при загрузке страницы.

Код


<img id="myimg" src="./img/CERT_2.gif" STYLE ="position:absolute">

<script>
function init_move(){
setInterval("move()",1)
move()
}

function move(){
document.all.myimg.style.bottom=0;
}

init_move()
</SCRIPT>

Подскажите, что не так.

Amphiluke

Дата 12.9.2009, 21:15 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

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

На выбор:

1. Без скриптов (не будет работать в IE6).

Код


<img id="myimg" src="./img/CERT_2.gif" style="bottom: 0px; position: fixed; z-index: 1000;">

2. Со скриптом (работает везде, но может неприятно мерцать)

Код


   <img id="myimg" src="./img/CERT_2.gif" style="bottom: 0px; position: absolute; z-index: 1000;">
   <script type="text/javascript">
      var im = document.getElementById("myimg");
      var initTop = im.offsetTop;
      function bottomImg() {
         im.style.top = (initTop + document.documentElement.scrollTop).toString() + "px";
      }
      window.onscroll = bottomImg;
   </script>

Добавлено через 7 минут и 1 секунду
Кстати, может понадобиться явное указание размеров картинки. Например:

Код


<img id="myimg" src="./img/CERT_2.gif" alt="" width="100" height="100" style="bottom: 0px; position: absolute; z-index: 1000;">

Noodly

Дата 12.9.2009, 21:36 (ссылка)

(нет голосов)

Загрузка ...

Новичок

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

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

Спасибо, но код для IE6 работает неправильно. При первой прокрутке скролла, картинка оказывается в самом верху, а не внизу экрана и оттуда не двигается с места.

Amphiluke

Дата 12.9.2009, 21:40 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

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

Вы, видимо, что-то сделали не так. smile

Второй вариант работает в IE6 — только что проверил. Покажите, как делаете.

Noodly

Дата 12.9.2009, 22:18 (ссылка)

(нет голосов)

Загрузка ...

Новичок

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

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

Картинка, которая должна всегда быть в углу экрана это картинка ISO 9001. При загрузке страницы, она на нужном месте и должна всегда быть там, даже при при прокрутке скроллинга. Ваш код в хтмл я отделил пробелами.

Это сообщение отредактировал(а) Noodly - 21.9.2009, 21:38

Amphiluke

Дата 12.9.2009, 23:37 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

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

Проблема довольно неприятная. Во-первых, по-видимому, из-за отсутствия DOCTYPE (или по другим причинам) на вашей странице вместо

Код


document.documentElement.scrollTop

надо использовать

Код


document.body.scrollTop

Но это полбеды. Пока не загрузится рекламка в правом верхнем углу, свойства изображения (offsetTop) не прочитываются правильно и управлять из скрипта положением картинки не удается! Остается только ждать окончания загрузки документа и уже тогда назначать обработчик события onscroll smile

Код


 <img id="myimg" src="./img/CERT_2.gif" alt="" width="150" height="150" style="bottom: 0px; position: absolute; z-index: 1000">
   <script type="text/javascript">
      var im;
      var initTop;
      function initVars() {
      im = document.getElementById("myimg");
      initTop = im.offsetTop;
      im.style.bottom="0px";
      window.onscroll = bottomImg;
      }
      function bottomImg() {
         im.style.top = (initTop + document.body.scrollTop).toString() + "px";
      }
      window.onload=initVars;
   </script>

Пока реклама не загрузится, картинка будет ползать при скроллинге... А потом будет всё как положено.

Noodly

Дата 13.9.2009, 00:20 (ссылка)

(нет голосов)

Загрузка ...

Новичок

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

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

Да! Большое спасибо, все работает! smile

Единственное, когда сворачиваешь страницу в окно и крутишь скроллинг, картинку невозможно догнать))
Можно ли поставить какое-то ограничение, чтоб картинка, когда весь текст прокручен, останавливалась за сантиметр до конца экрана?

В любом случае спасибо!

Это сообщение отредактировал(а) Noodly - 13.9.2009, 00:23

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »