Подскажите, как можно реализовать подобную вещь. При уменьшении/увеличении экрана окончание шнура (красного цвета), извивалось за шнуром.


Это сообщение отредактировал(а) FightInGlory - 29.6.2010, 16:46

• Рисовать его с использованием canvas.  Правда тогда лучше штекер подключения изобразить на одном и том-же уровне. К примеру - расправлять - сжимать сам шнур, сложенный пружинкой...
• нарисовать весь "путь" искривления шнура и "обрезать" его вышележащим дивом. правда что делать с красным штекером и плавающей точкой подключения шнура к колонке - ума не приложу. Разве что несколько картинок под разными углами и подставлять нужную картинку в зависимости от длины шнура... Сложные вычисления получаются... в этом случае проще на штекер наплевать  

Это сообщение отредактировал(а) ksnk - 29.6.2010, 17:36

а) какое отношение гифка имеет к этому разделу? - в смысле, что хочется сделать на js как показано на картинке?
б) это задание как раз для подраздела "JavaScript: для новичков", но явно не профи-вопрос ...

Если как тут, то это делается для определенного количества положений, для которых и определяется "наконечник". На практике так: нижний слой - весь шнур, следующий слой - магнитофон в 3-4-5-6 положениях (сколько надо) и верхний слой - наконечник соответственно в 3-4-5-6 положениях. 3 картинки, которые при будто бы "анимации" смещаются и перерисовываются. Наконечник во всех положениях, естественно, в одной картинке, и перерисовка через изменение положения картинки в контейнере (CSS-sprites), а то мелькания достанут.

А вообще-то, это баннерно-анимационная штука и заниматься подобным должны специальные инструменты - та же гифка (тьфу, не люблю и не использую) или флешка, где можно прорисовать действительно анимационную штуку, а не этот "фильмоскоп".

2 IDVsbruck, данное изображение было в качестве примера. Оно показывает, что при изменении размера окна браузера шнур должен увеличиваться (если размер окна увеличивается), а наконечник перемещаться по вертикали за ним. Пример про слайды лично я не понял. Ну сделаю я 10 положения, но не добьюсь идеального плавного движения. И поверь данный пример далеко не каждый опытный сделает, не то что новичек.
2 ksnk, большое спасибо за ответ. Тоже не могу сообразить как быть со штекером, но надо именно так.

Я не знаю кто такой новичЕк, с ним не знаком, но, в принципе, задача не так уж и сложна. Самый сложный вопрос, как ни странно, заключается в том, как быстро (и удобно) поворачивать картинку со штекером. Но вроде библиотеки есть - найти не составит труда.
Главная "фича" в том, что шнур не берем с фоток, а рисуем сами - в фотошопе (уроков - море, абсолютно реалистичные получаются), но рисуем не просто линию, а, скажем, нарисованную где-то в Матлабе или Маткаде - можно чистую синусоиду, можно слегка затухающую или с переменным множителем угла (каждая "волна" шире или уже), выписываем и импортируем в графический редактор. Одним словом, суть в том, чтобы точно знать формулу шнура от вилочки до места "входа" в гаджет. Дальше - дело техники и аккуратного математического программирования. Нижний слой - шириной до гаджета - шнур, выше слой оставляем под штекер, и верний - гаджет. Так как у тебя есть точные координаты и функция кривой, значит, всегда можно вычислить вертикаль и угол касательной (первая производная, кажись - для тригонометрических функций там и вовсе просто). Остается только перемещать штекер по горизонтали вслед за гаджетом, по вертикали - ордината функции, а угол - касательная в месте соприкосновения шнура и гаджета. Для чистой синусоиды задача и вовсе простецкая, только не так фотореалистично будет.

Если отвечать прямо на вопрос, как на картинке  то делается просто (извеняюсь, если тут об этом написали, и я просмотрел)
1. Рисуется шнур  (к примеру как на картинке)
2. Берется этот же шнур, перекрашивается и немного увеличивает его толщина (хотя необязательно)
3. Нижним слоем идет шнур. верхним та перекрашенная картинка с шириной 5px и с отступами слева в элементе и в фоне.
4. Затем при изменении размера,  выставлять нужный отступ в обоих параметрах


это если прям как на картинке.


Это сообщение отредактировал(а) mxt - 7.7.2010, 00:46

По-моему, слегка модифицировав подход mxt, можно обойтись и без JS (если не учитывать IE6)...