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

Question

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

0

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

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

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

allence 28 апр. 2014, в 19:25

Источник

3

Да, это ясно. Можете ли вы опубликовать код, который вы уже пробовали, и объяснить, что произошло?
Archer 28 апр. 2014, в 16:38
0

Взгляните на метод .ainmate () в jQuery
SlashmanX 28 апр. 2014, в 16:47
0

на самом деле у меня нет точного кода для этого. Я могу просто создать строку по свойству z-index. но не знаю, как их сдвинуть.
allence 28 апр. 2014, в 16:50
0

Покажите нам, что у вас уже есть - код.
Archer 28 апр. 2014, в 16:53
0

Возможно, вы сможете использовать CSS-переходы
nullability 28 апр. 2014, в 17:00
0

то, что я хочу сделать, это сдвинуть линии соответственно в ссылке: jsfiddle.net/QL3wT/2 Каждый цвет должен скользить соответственно не одновременно. Мне нужен код скрипта jquery.
allence 28 апр. 2014, в 17:24

Показать ещё 4 комментария

Теги:

javascript

jquery

html

css

html5

3 ответа

Ещё вопросы

Да, это ясно. Можете ли вы опубликовать код, который вы уже пробовали, и объяснить, что произошло?
на самом деле у меня нет точного кода для этого. Я могу просто создать строку по свойству z-index. но не знаю, как их сдвинуть.
Покажите нам, что у вас уже есть - код.
Возможно, вы сможете использовать CSS-переходы
то, что я хочу сделать, это сдвинуть линии соответственно в ссылке: jsfiddle.net/QL3wT/2 Каждый цвет должен скользить соответственно не одновременно. Мне нужен код скрипта jquery.

Joe Komputer · Answer 1 · 2014-04-28T15-31-00.000Z

1

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

Joe Komputer 28 апр. 2014, в 15:31

0

+1. Немного сложнее, но анимации будут плавнее (с большими анимациями).
Martijn 28 апр. 2014, в 17:02
0

Люди так говорят, но я заметил, что анимация прерывистая и медленная по сравнению с обычным jQuery Animate.
WASasquatch 28 апр. 2014, в 17:23
0

Я считаю, что мобильные устройства анимируют мои меню намного быстрее и плавнее. Может быть, устройство / анимация чувствительна
Martijn 28 апр. 2014, в 17:32
1

Это устройство / браузер чувствителен. Некоторые браузеры / устройства не обрабатывают анимацию, управляемую CSS, а также другие. По моему опыту, лучший способ создания плавной анимации во всех браузерах и устройствах - аппаратное ускорение анимации. Поэтому вместо top: 10px вы бы использовали transform: translate3d (0,10px, 0). Этот метод обычно исключает чоппины, на которые ссылается @WASasquatch.
Joe Komputer 28 апр. 2014, в 17:59

Показать ещё 2 комментария

JimmyRare · Answer 2 · 2014-04-28T16-03-00.000Z

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

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

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

Martijn · Answer 3 · 2014-04-28T14-52-00.000Z

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

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

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

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