как добавить скользящие линии внутри изображения

0

Привет, я борюсь с проблемой jquery, что мне нужно, скользящими линиями внутри границ изображения. Есть четыре строки, и я хочу, чтобы они скользнули внутрь границы, когда страница загружена. Первая строка должна скользить вниз; второй слева направо; третий - сверху вниз и четвертый справа налево.

Надеюсь, что мой вопрос ясен.

Изображение 174551

(указанные линии красные)

  • 3
    Да, это ясно. Можете ли вы опубликовать код, который вы уже пробовали, и объяснить, что произошло?
  • 0
    Взгляните на метод .ainmate () в jQuery
Показать ещё 4 комментария

3 ответа

1

Вам не нужно JS для этого. Вот простой способ CSS выполнить эту анимацию onload, используя keyframes. Если вы не хотите поддерживать старые браузеры, этот метод должен работать.

  • 0
    +1. Немного сложнее, но анимации будут плавнее (с большими анимациями).
  • 0
    Люди так говорят, но я заметил, что анимация прерывистая и медленная по сравнению с обычным jQuery Animate.
Показать ещё 2 комментария
0

Вот демонстрация, которая использует только css.

Он в основном использует @keyframes для решения проблемы.

  • 0
    Это очень мило. Но, возможно, я не мог правильно обратиться к проблеме. Линии проходят внутри изображения. Но я хочу, чтобы они двигались изнутри внутрь. jsfiddle.net/QL3wT/2
  • 0
    Нравится?
0

Я покажу первые два, вы можете сделать два других

function slideLine1(){ $('#line1').animate({width: '100%'}, 1000, slideLine2); }
function slideLine2(){ $('#line2').animate({width: '100%'}, 1000, slideLine3); }

Это сработает. Однако вы можете сделать это с помощью 1 функции, вызывающей себя и переменной i. Это будет зависеть от вас.

Существуют и другие методы, это очень простой пример. Совет. Посмотрите на цепочку jQuery.

Сообщество Overcoder
Наверх
Меню