Аватар для Dimedrol
2378 / 941 / 129
Регистрация: 25.04.2009
Сообщений: 2,635
Записей в блоге: 4

JQuery: шапка сайта

01.08.2010, 13:28. Показов 2677. Ответов 8
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Пытался сделать анимированную шапку сайта на JQuery.
Вот скрипт, который у меня получился:
JavaScript
1
2
3
4
5
$(document).ready(function(){leaveScreen();});
    function leaveScreen(){
        $("#clouds").animate({backgroundPosition:'-5%'}, 4000);
        setTimeout(function(){leaveScreen();}, 2000);
        }
Проблема в том, что animate срабатывает только один раз.
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
01.08.2010, 13:28
Ответы с готовыми решениями:

Анимированная шапка для сайта
Привет нужна похожая шапка для сайта как здесь Есть ли у кого ссылки или сайты на которых учат делать такие или уже имеется код?

Фиксированная шапка сайта, при скролле по id, залезает на секцию со встречным id. как исправить?
Добро времени суток! Возможно кто сталкивался с такой причиной!? Делаю лендинг, шапка сайта фиксированная и при нажатии на меню, должна...

Вкладки для сайта на jquery
Не могу разобраться с вкладками. Предположим есть: <div id="link"> <ul> <li><a...

8
Благотворец
 Аватар для arvitaly
142 / 122 / 13
Регистрация: 29.04.2009
Сообщений: 537
01.08.2010, 13:56
Используй setInterval
1
 Аватар для Vovan-VE
13210 / 6599 / 1041
Регистрация: 10.01.2008
Сообщений: 15,069
01.08.2010, 14:06
Цитата Сообщение от Dimedrol Посмотреть сообщение
JavaScript
1
{backgroundPosition:'-5%'}
Срабатывает много раз, просто визуально это не видно. Первый раз оно съехало на 5%, а в остальные разы оно уже и так на 5%, значит ехать некуда. Надо на каждой итерации делать еще по 5%, а когда до 100% дойдет, то снова от 0.
1
 Аватар для Dimedrol
2378 / 941 / 129
Регистрация: 25.04.2009
Сообщений: 2,635
Записей в блоге: 4
01.08.2010, 18:03  [ТС]
Вот скрипт, который получился:
JavaScript
1
2
3
4
5
6
7
8
var pos = 0;
    $(document).ready(function(){leaveScreen();});
    function leaveScreen(){
        if(pos==100){pos=0;}
        pos+=5;
        $("#clouds").animate({backgroundPosition:'-' + pos + '%'}, 4000);
        setTimeout(function(){leaveScreen();}, 2000);
        }
А можно сделать, чтобы картинка не останавливалась между срабатыванием функции?
0
Благотворец
 Аватар для arvitaly
142 / 122 / 13
Регистрация: 29.04.2009
Сообщений: 537
01.08.2010, 18:04
Таймаут поменьше, инкремент pos поменьше
1
 Аватар для Dimedrol
2378 / 941 / 129
Регистрация: 25.04.2009
Сообщений: 2,635
Записей в блоге: 4
01.08.2010, 18:04  [ТС]
Даже так останавливается:
JavaScript
1
2
3
4
5
6
7
8
var pos = 0;
    $(document).ready(function(){leaveScreen();});
    function leaveScreen(){
        if(pos==100){pos=0;}
        pos+=5;
        $("#clouds").animate({backgroundPosition:'-' + pos + '%'}, 2000);
        leaveScreen();
        }
0
 Аватар для Vovan-VE
13210 / 6599 / 1041
Регистрация: 10.01.2008
Сообщений: 15,069
01.08.2010, 18:13
Dimedrol, Что делает animate()? Плавно двигает? Кто запрещает самому двигать?
JavaScript
1
2
3
4
5
6
7
8
9
10
11
$(function(){
    var pos = 0, // стартовая позиция в пикселях
        step = 1, // шаг и пикселях
        width = 1000, // ширина изображения в пикселях
        o = document.getElementById('clouds'); // собственно элемент
    setInterval(function(){
        pos -= step;
        if (pos <= -width) pos += width;
        o.style.backgroundPosition = '0 ' + pos + 'px';
    }, 100); // поменьше-побольше
});
1
 Аватар для Dimedrol
2378 / 941 / 129
Регистрация: 25.04.2009
Сообщений: 2,635
Записей в блоге: 4
01.08.2010, 18:24  [ТС]
Vovan-VE, переделал твой код т.к у тебя в вертикальной плоскости анимация шла,вот сам скрипт:
JavaScript
1
2
3
4
5
6
7
8
9
10
$(function(){
    var pos = 100;
        step = 1;
        o = document.getElementById('clouds'); 
    setInterval(function(){
        pos -= step;
        if(pos==0) pos=100; 
        o.style.backgroundPosition = '-' + pos + '%';
    }, 50); 
});
Проблемы:
очень быстро идет (если поставить большее время, то будет рывками)
Мне не нравится сточка
JavaScript
1
if(pos==0) pos=100;
т.к каждый период заканчивается рывком.
0
 Аватар для Vovan-VE
13210 / 6599 / 1041
Регистрация: 10.01.2008
Сообщений: 15,069
01.08.2010, 18:29
Dimedrol, Зачем в % ? Делай в px. Про вертикаль да, напутал , но в backgroundPosition (он же CSS background-position) надо писать "x y".
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
01.08.2010, 18:29
Помогаю со студенческими работами здесь

Как можно отправить данные с одного сайта на другой с jQuery
Кто сможет подсказать как эту задачу решить Помогите найти решение как можно сделать передачу данных нужно передать с одного сайта на...

Как правильно вставить jQuery код в код страницы сайта?
привет всем:) у меня возникла проблема, когда я свой jQuery код вставляю в код html главной страницы , у меня моя анимация оказывается в...

Первые шаги в JQuery (хочу добавить переменную в код JQuery)
Здравствуйте. Захотел сделать галерею на сайте и чтобы при нажатии на кнопу показывало случайную картинку, но не понимаю как вставить...

Установка стиля используя jQuery для ошибок , которые генерирует jquery validate
Стиль для ошибок, которые генерируются с помощью библиотеки jquery validate можно оформить через файл *.css. .error { ...

Отваливается draggable из JQuery из за jquery-windows-engine
Всем привет, Вот уже сломал себе мозг такой проблемой, буду рабски благодарен за любую помощь :) Использую на страничке оконную...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Опции темы

Новые блоги и статьи
Символьное дифференцирование
igorrr37 13.02.2026
/ * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! в-строка - входное арифметическое выражение в инфиксной(обычной). . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image
8Observer8 10.02.2026
Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .
Установка Qt-версии Lazarus IDE в Debian Trixie Xfce
volvo 10.02.2026
В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru