Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.57/14: Рейтинг темы: голосов - 14, средняя оценка - 4.57
 Аватар для Dimedrol
2378 / 941 / 129
Регистрация: 25.04.2009
Сообщений: 2,635
Записей в блоге: 4

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

01.08.2010, 13:28. Показов 2669. Ответов 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
Ответ Создать тему
Новые блоги и статьи
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru