Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.04.2025, 10:45
Интересующийся
Отправить личное сообщение для Puzzle Посмотреть профиль Найти все сообщения от Puzzle
 
Регистрация: 29.05.2017
Сообщений: 18

Как заставить крутиться картинку по клику
Ребят, помогите пожалуйста, совсем не силён в JS.
Есть сайт ССЫЛКА нужно сделать так чтобы при нажатии на фотку трека (она же кнопка Play), эта фотка у этого трека начинала крутиться по часовой стрелке, при нажатии ещё раз (ставится на Pause) перестаёт крутиться (Желательно бы чтобы принимала исходное положение, но это по возможности и не так важно).
Что не пробовал делать, крутится только одна первая картинка..уже час вожусь голова поехала(

Последний раз редактировалось Puzzle, 18.04.2025 в 10:52.
Ответить с цитированием
  #2 (permalink)  
Старый 18.04.2025, 11:24
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,815

<style>
img {
    display: inline-block;
    width: 60px;
    height: 60px;
    background: gray;
    border-radius: 50%;
}

.play-button--playing img {
    animation: spin 4s linear infinite;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}
</style>

<script>
document.addEventListener("DOMContentLoaded", () => {
    const buttons = document.querySelectorAll(".play-button");
    const NOW_PLAYING_CLASS_NAME = "play-button--playing";

    buttons.forEach(node => {
        node.addEventListener("click", e => {
            e.preventDefault();

            const isNowPlaying = node.classList.contains(NOW_PLAYING_CLASS_NAME);

            buttons.forEach(button => {
                button.classList.toggle(NOW_PLAYING_CLASS_NAME, !isNowPlaying && node === button);
            });
        });
    });
});
</script>

<a href="#" class="play-button"><img src="" alt="img-1"></a>
<a href="#" class="play-button"><img src="" alt="img-2"></a>
<a href="#" class="play-button"><img src="" alt="img-3"></a>
Ответить с цитированием
  #3 (permalink)  
Старый 18.04.2025, 11:43
Интересующийся
Отправить личное сообщение для Puzzle Посмотреть профиль Найти все сообщения от Puzzle
 
Регистрация: 29.05.2017
Сообщений: 18

Ну разные варианты я находил на просторах интернета..так то всё понятно когда по чистому..а вот к своему сайту не могу примерить..Пытался ваш пример под себя подстроить, абракадабра получилась со всеми картинками на сайте ну и ничего не вращалось(

Последний раз редактировалось Puzzle, 18.04.2025 в 12:11.
Ответить с цитированием
  #4 (permalink)  
Старый 22.04.2025, 13:16
Интересующийся
Отправить личное сообщение для Puzzle Посмотреть профиль Найти все сообщения от Puzzle
 
Регистрация: 29.05.2017
Сообщений: 18

Сообщение от Nexus
<style>
02
img {
03
    display: inline-block;
04
    width: 60px;
05
    height: 60px;
06
    background: gray;
07
    border-radius: 50%;
08
}
09
 
10
.play-button--playing img {
11
    animation: spin 4s linear infinite;
12
}
13
 
14
@keyframes spin {
15
    100% {
16
        transform: rotate(360deg);
17
    }
18
}
19
</style>
20
 
21
<script>
22
document.addEventListener("DOMContentLoaded", () => {
23
    const buttons = document.querySelectorAll(".play-button");
24
    const NOW_PLAYING_CLASS_NAME = "play-button--playing";
25
 
26
    buttons.forEach(node => {
27
        node.addEventListener("click", e => {
28
            e.preventDefault();
29
 
30
            const isNowPlaying = node.classList.contains(NOW_PLAYING_CLASS_NAME);
31
 
32
            buttons.forEach(button => {
33
                button.classList.t oggle(NOW_PLAYING_CLASS_NAME, !isNowPlaying && node === button);
34
            });
35
        });
36
    });
37
});
38
</script>
39
 
40
<a href="#" class="play-button"><img src="" alt="img-1"></a>
41
<a href="#" class="play-button"><img src="" alt="img-2"></a>
42
<a href="#" class="play-button"><img src="" alt="img-3"></a>
Не могли бы вы посмотреть что я не так сделал? Вроде как всё так..но не работает в моём случае((
Ответить с цитированием
  #5 (permalink)  
Старый 22.04.2025, 13:39
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,815

Не на ту ссылку (тег a) класс play-button повесили.
Скрипт достаточно вставить на страницу 1 раз, а не по экземпляру на каждую кнопку.
Ответить с цитированием
  #6 (permalink)  
Старый 22.04.2025, 14:09
Интересующийся
Отправить личное сообщение для Puzzle Посмотреть профиль Найти все сообщения от Puzzle
 
Регистрация: 29.05.2017
Сообщений: 18

Сообщение от Nexus Посмотреть сообщение
Не на ту ссылку (тег a) класс play-button повесили.
Скрипт достаточно вставить на страницу 1 раз, а не по экземпляру на каждую кнопку.
Куда уже только не вставлял..не работает..у вас на примере всё просто на одной страничке..в моём случае не работает так..это скрипт DLE (DtaLifeEngine) уже голову изломал..похоже придётся забить на эту затею оставить без крутяшек
Ответить с цитированием
  #7 (permalink)  
Старый 22.04.2025, 14:12
Интересующийся
Отправить личное сообщение для Puzzle Посмотреть профиль Найти все сообщения от Puzzle
 
Регистрация: 29.05.2017
Сообщений: 18

Сообщение от Nexus Посмотреть сообщение
Не на ту ссылку (тег a) класс play-button повесили.
Скрипт достаточно вставить на страницу 1 раз, а не по экземпляру на каждую кнопку.
Получается сам трек выводится в одном файле (назовём файл 1) так:

<!-- Трек №{news-id} -->
<div class="wmbox_home"><span class="cifra">{post-custom-id}</span>
<div class="ti">
<a href="javascript:ShowOrHide('prosl-{news-id}')"><img src="https://****"/>
<a id="Player{news-id}" class="iplay" data-player="https://***" data-title="{title}" data-reads="https://***/down.php?id={news-id}" data-id="{news-id}" data-idn="play{news-id}" data-nextplay="true"></a>
</div>
      <ul class="ti">
	     <li><h1 class="heading"><strong> [full-link] {title}[/full-link]</strong></h1></li>
	     <li>Добавлено: {date}</li>
      </ul>
</a>      
</div>
<!-- Конец трека №{news-id} --


А сам файл 1 выводится в файле 2 в кратце вот так

<div class="outer_stata">
  <div class="middle_stata">
    <div class="inner_stata">
{content}
    </div>
  </div>
</div>


получается как бы файл 1 это один трек

Последний раз редактировалось Puzzle, 22.04.2025 в 14:16.
Ответить с цитированием
  #8 (permalink)  
Старый 23.04.2025, 11:27
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,815

Puzzle, дело не в том, что "за бесплатно никто не помогает", а в том, что вам показали рабочий код, который решает вашу проблему.
Вам осталось только разместить код на своей странице и добавить нужной ссылке в разметке класс `play-button`, всё.

В прошлый раз когда я смотрел, вы этот класс добавили не той кнопке.
У вас, какого-то фига, на каждый элемент идет по 2 ссылке: одна с картинкой внутри; другая, видимо, для воспроизведения аудио.

Для начала поправьте ваш html-код, потому что сейчас он содержит ошибку:
<!-- Трек №{news-id} -->
<div class="wmbox_home"><span class="cifra">{post-custom-id}</span>
    <div class="ti">
*!*
        <a href="javascript:ShowOrHide('prosl-{news-id}')">
*/!*
            <img src="https://****" />
            <a 
               id="Player{news-id}" 
               class="iplay" 
               data-player="https://***" 
               data-title="{title}" 
               data-reads="https://***/down.php?id={news-id}" 
               data-id="{news-id}" 
               data-idn="play{news-id}" 
               data-nextplay="true"
            ></a>
    </div>
    <ul class="ti">
        <li>
            <h1 class="heading"><strong> [full-link] {title}[/full-link]</strong></h1>
        </li>
        <li>Добавлено: {date}</li>
    </ul>
*!*
    </a>
*/!*
</div>
<!-- Конец трека №{news-id} --


Как разберетесь с ошибками, уберете лишнее, может быть придете к чему-то похожему:
<!-- Трек №{news-id} -->
<div class="wmbox_home"><span class="cifra">{post-custom-id}</span>
    <div class="ti">
        <a 
               id="Player{news-id}" 
               class="iplay *!*play-button*/!*" 
               data-player="https://***" 
               data-title="{title}" 
               data-reads="https://***/down.php?id={news-id}" 
               data-id="{news-id}" 
               data-idn="play{news-id}" 
               data-nextplay="true"
            >
                <img src="https://****" />
            </a>
    </div>
    <div class="ti">
        <div>
            <h1 class="heading"><strong>[full-link]{title}[/full-link]</strong></h1>
        </div>
        <div>Добавлено: {date}</li>
    </div>
</div>
<!-- Конец трека №{news-id} --
Ответить с цитированием
  #9 (permalink)  
Старый 23.04.2025, 11:31
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,815

Puzzle, если у вас так ничего и не выйдет и вы по прежнему будете готовы заплатить за работу, то создайте новый топик в разделе "Работа".
Ответить с цитированием
  #10 (permalink)  
Старый 23.04.2025, 13:04
Интересующийся
Отправить личное сообщение для Puzzle Посмотреть профиль Найти все сообщения от Puzzle
 
Регистрация: 29.05.2017
Сообщений: 18

Ну крутиться то картинку по вашему методу я смог ещё изначально..проблема в том, что если делать чтобы картинка крутилась вашим методом, то у меня пропадают png кнопки плей и пауза которые поверх обложки трека и крутится картинка только при обновлении страницы.А при работе AJAX перестаёт..к примеру крутится у одного трека картинка, перехожу к другому треку и там уже не крутится..вот к примеру тут посмотрите ССЫЛКА а должно быть как на главной, при наведении на обложку появляется картинка прозрачная Play при нажатии трек играет и светится прозраным Pause..пока эксперементирую с крутящейся обложкой отдельно для трека одного

Последний раз редактировалось Puzzle, 23.04.2025 в 13:18.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как кроссбраузерно расположить фоновую картинку на весь экран? ligisayan Internet Explorer 1 10.01.2016 14:58
как сделать выпадающие картинки по клику с перезаписью select thefair Общие вопросы Javascript 5 15.12.2015 22:54
Как при клики повернуть картинку на 45% byM Общие вопросы Javascript 1 05.08.2015 17:15
Как таймер заставить работать поочерёдно вызываю одну и ту же функцию два раза? JavaScriptProgrammer Events/DOM/Window 12 08.11.2012 23:41
как вывести картинку по запросу Bon Общие вопросы Javascript 0 03.04.2012 13:29