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

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Плавное движение div при прокрутке скролла 
:(
    Опции темы
alsofter
Дата 28.6.2010, 11:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Добрый день!
Есть такая проблема.
Необходимо чтобы слой div перемещался горизонтально вместе с прокручиванием экрана (ширина области экрана по горизонтали большая, появляется горизонтальный скролл). Этого я достиг с помощью следующего кода:
Код

<html>

<head>
<script type="text/javascript" language="javascript1.2">
</script>
<title>JS</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body onload="_init()">
    <div id="num1">
        <div id="inside">
            TEXT
        </div>
    </div>
    <div id="num2">
    </div>
    <script type="text/javascript">
        var obj = document.getElementById("num1");
        obj.style.left = '0px';
        function _init() 
        {
            window.onscroll = function()
            {
         obj.style.left = document.documentElement.scrollLeft+"px";
            }
     }
        </script>
</body>

</html>

Дело в том, что при прокрутке скролла блок дергается, анимация некрасивая. Как можно осуществить это без дерганий?
В стиля для блока num1 стоит position: absolute.
position: fixed - не годится для решения проблемы, так как блок мне нужно закрепить только по горизонтали. Дело в том, что подобную анимацию мне нужно будет делать для футера, а при маленьких разрешениях этого футера при position: fixed видно не будет.
В ИЕ6 хорошо получается использовать в стиле для блока expression, а для исключения мерцания закрепляется фон бэкграунда
body {
background: url('dsfsf.gif') fixed;
}
Но expression работает только в ИЕ, мне нужна работоспособность в мозилле и опере.
Может кто знает как решить данный вопрос? Буду очень благодарен.

PM MAIL   Вверх
ex3c
Дата 28.6.2010, 12:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Может, стоит попробовать делать через setInterval?
PM MAIL   Вверх
bars80080
Дата 28.6.2010, 12:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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



а что за expression? может быть его можно переложить прямо в код js?
PM MAIL WWW   Вверх
alsofter
Дата 28.6.2010, 13:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Цитата(bars80080 @ 28.6.2010,  12:46)
а что за expression? может быть его можно переложить прямо в код js?

В стилях для ie_6 я прописывал так:

Код

#num1_ie6 {
width: expression(screen.width-20+'px');
height: 101px; 
background-color: #585858;
border-bottom-style:solid;
border-bottom-color: #FFFFFF;
border-bottom-width: 1px;
position: absolute;
top: expression(eval(document.documentElement.scrollTop));;
left:expression(eval(document.documentElement.scrollLeft));
}


В expression указывается, что берутся координаты ползунка при горизонтальном скролле. Все работает на ура. Но expression - Это изобретение от разработчиков IE, а в других браузерах оно не поддерживается. Надо было придумать что-то другое, вото и вымучил тот код, что в первом посте. Одна проблема - мерцание при движении.

Добавлено @ 13:16
Цитата(ex3c @ 28.6.2010,  12:44)
Может, стоит попробовать делать через setInterval?

Я пробовал  через TimeOut.
За основу брал пример, найденный на одном из форумов в сети:
Код

function dd()
{
 var f = document.getElementById("f");
 var x = parseInt(f.style.left);
 x += 5;
 f.style.left = x + "px";
 if (x>500) clearTimeout(t);
}
var t = setTimeout("dd()", 30);

Слой перемещается, но очень медленно, непропорционально прокрутке скролла. Может я что-то не так понял. Если не трудно можете кинуть пример?

Это сообщение отредактировал(а) alsofter - 28.6.2010, 14:28
PM MAIL   Вверх
ex3c
Дата 29.6.2010, 08:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Код

setInterval(function () {
element.style.top = document.scrollTop;
}, 30);


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


 




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


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

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