Пользователь пока ничего не рассказал о себе

Достижения

Все достижения (4)

Наибольший вклад в теги

Все теги (21)

Лучшие ответы пользователя

Все ответы (60)
  • Что крутого можно изучить верстальщику в выходной день?

    @nikfakel
    Веб-разработчик
    Верстальщик должен стремиться стать фронтедером! Учите native JavaScript или фреймворки
    Ответ написан
    Комментировать
  • Как позиционировать элементы по кругу?

    @nikfakel
    Веб-разработчик
    Для начала я бы определил границы применяемости: что, например, будет, если видео будет 1000. Значит сразу показываем только несколько, остальные доступны по ссылке. В таком случае можно вообще расположить 10 картинок, обозначающие видео, по кругу через position: absolute. Но, очевидно, для универа такое не подойдет.

    Пусть тогда нам надо расположить от 6 до 20 картинок по кругу (меньше 6 - круг будет не очень-то круглый, больше 20 - картинки слишком мелкие). В таком случае просто рассчитываем через JS местоположение и указываем его через position:absolute.
    Структура HTML:
    <div id="wrap">
    <img src="/">
    <img src="/">
    <img src="/">
    <img src="/">
    <img src="/">
    <img src="/">
    <img src="/">
    <img src="/">
    <img src="/">
    <img src="/">
    <img src="/">
    <img src="/">
    <img src="/">
    <img src="/">
    <img src="/">
    <img src="/">
    <img src="/">
    <img src="/">
    <img src="/">
    <img src="/">
    </div>

    CSS просто чтобы было наглядно сразу посмотреть:
    #wrap {position: absolute; }
    #wrap img {width: 30px; height: 30px; background:#333; position: absolute; }

    и, собственно, сам скрипт на JS и jQuery:
    var num = 20; // Число картинок
    var wrap = 400; // Размер "холста" для расположения картинок
    var radius = 200; // Радиус нашего круга
    
    $(document).ready(function() {
      for (i=0;i<num; i++){
        var f = 2 / num * i * Math.PI;  // Рассчитываем угол каждой картинки в радианах
        var left = wrap + radius * Math.sin(f) + 'px';
        var top = wrap + radius * Math.cos(f) + 'px';
        $('#wrap img').eq(i).css({'top':top,'left':left}); // Устанавливаем значения каждой картинке
      }
    });

    Ну и вам, наверно, надо будет еще добавить функцию для определения числа картинок. Ну и при клике на картинку открывается видео (это уже как вы сами решите, можно и модальное окно).
    Ответ написан
    1 комментарий
  • Как сверстать такую таблицу?

    @nikfakel
    Веб-разработчик
    htmlbook.ru/html/td

    Параметры rowspan и colspan
    Ответ написан
    Комментировать
  • Как передать музыку с сайта на микрофон?

    @nikfakel
    Веб-разработчик
    Надо
    1. Очень мощный микрофон с маленьким сопротивлением.
    2. Плагин для JS - AudioToMic (погуглите).
    Подключаете плагин, прописываете в скрипте -
    audio.src('browser') = $_(document).getElementByType('microphone');
    audio.playMicRockNRoll(track,volume');

    3. Готово! Слушаете звук с микрофона ))
    Ответ написан
    2 комментария

Лучшие вопросы пользователя

Все вопросы (4)