Поиска плагина пост

Есть картинка примерно такого плана

Linux Nix Web Development - http://linuxoids.org/ image

Требуется: при наведении мыши на картинку рисовать вертикальную линию, привязанную к движению мыши (типа слайдера, только он графический). И чтобы по клику отдавал хотя бы координаты клика в системе координат картинки.

ЗЫ jquery. Можно написать, но ведь наверняка есть готовый.

29 Responses to Поиска плагина постЕсть картинка примерно такого плана

  1. Kr0Blank:

    удваиваю d3

  2. U4Zero:

    если не надо прям кроссбраузерно, то положить сверху канвас и рисовать линию по mousemove — минут 10 работы. Искать дольше 🙂

  3. Regwhite:

    канвас-то тут нафига?

  4. Kaeer:

    потому что график — это img, рисуем поверх него канвас, а там уже и линии.

  5. Regwhite:

    одна линия. по mousemove. задаешь массив соответствия y x и однопиксельный див двигаешь. или i. или strong. и работать будет везде.
    но не модно, да, не тру, конечно.

  6. U4Zero:

    короче я просто написал скрипт. Под ваши там фреймворки подгоните http://jsfiddle.net/n0mini/RXGX9/1/

  7. U4Zero:

    просто с канвасом проще. Ну и у меня были подобные задачи, потом всегда надо еще что-то подрисовывать 🙂

  8. Regwhite:

    вот это — проще, чем onmousemove = function () { div.offsetHeight = coords[event.x]; }?

  9. U4Zero:

    чуви, ну напиши работающий скрипт, там и будем дискутировать. К тому же я не борюсь за премию простоты, я сделал как мне нравится.

  10. Regwhite:

    не борюсь за премию простоты, я сделал как мне нравится
    о чем и речь. а ты говоришь просто с канвасом проще 🙂
    держи 🙂

  11. U4Zero:

    * Боже, прости меня, я обещал не вступать в полемику о коде *

    Спасибо за ссылку на vanillajs, она твитор обошла несколько недель назад 🙂 Я как раз таки написал код без использования фреймворков.

    То, что у тебя в примере, у меня тоже делается кортоко:
    ctx.fillStyle = ‘rgba(255, 0, 0,.7)’;
    ctx.fillRect(evt.offsetX, 0, 1, canvas.height);

    Остальной код про клики, сохранения точки и очистки после убирания мыши с элемента.

    В твоем решении я бы, кстати, двигал бэкграунд, чтобы обойтись одним элементом. Тебе же понадобится 2 элемента (чтобы нормально ловить клик и мув).

    К тому же использовать канвас современно и модно, так что надо юзать. Решение с канвасом расширемое (я об этом уже писал) и если нет необходимости поддерживать старье — лучше юзать канвас.

    Зануда мод ON
    Из-за того, что ты двигаешь элемент, бразуер тратит большее время на отрисовку, нежели отрисовка линии в канвасе. *ссылка на то, как браузер отрисовывает и обсчитывает страницу*
    А еще у тебя будет постоянный over/out, так как ты будешь двигать элемент под мышь. В моем случае элемент всегда один и все чистенько. Можно конечно, юзать enter/leave из jQuery, но это дополнительные if’ы (я говорю о реализации enter/leave), без которых можно обойтись.
    Зануда мод OFF

    Тем не менее, я понимаю твою точку зрения и даже принимаю ее. Если бы я писал код не для незнакомца и не хотел бы доставить себе максимум фана из задачки, может быть я выбрал бы и твое решение. А может и нет.

    Спасибо за внимание, пойду выпью чаю.

  12. Regwhite:

    я просто за минимализм 🙂
    два элемента не обязательно, можно на контейнере ловить mousemove, он же бабблится. кажись.
    с канвасом принципиально неудобна ровна одна штука — поддержка старого говна. но я бы уже из принципа хуй клал. уже, наверное, пора.

  13. U4Zero:

    Миниализм это польза. Пойду тебе плюсики поставлю, ты хороший. К тому же пост про Бадди Холли мне понравился.

  14. U4Zero:

    Эй, вожатый! Мы тут такую портянку накатали, а тебя не видно

  15. Regwhite:

    хорошо, что напомнил, я там ссылочку пиздатую еще тиснул

  16. AtpTunes:

    я тоже его использую, в коммерческих проектах, т.к. у highcharts достаточно занятная лицензия.

  17. Kr0Blank:

    highcharts не пробовал, а в d3 мне идея сама нравится.

  18. Regwhite:

    погоди, а не тот ли ты Макс Никитин, который там студия все дела?

  19. U4Zero:

    ну я работал в студии Лебедева, ага. А что?

  20. Regwhite:

    ты к нам с Костиком в Ютинет приходил как-то 🙂

  21. U4Zero:

    А, ого. Ну привет тогда 🙂

  22. RanMsk:

    в мозилле последней под убунтой не работает, но идею я понял, пасип

  23. U4Zero:

    В мозилле может совсем не работать, я в хроме писал. Рад помочь.

  24. Regwhite:

    а ты все канвас, канвас… 🙂

  25. U4Zero:

    Да не, там в моих кривых руках дело, а не в канвасе. Я не тестил, просто заготовку на коленке набросал

Добавить комментарий