Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 01.07.2022, 02:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Nexus
считаете, что ТС оно может быть вовсе не нужно?
вангую что нужна линейка блоков)))
Ответить с цитированием
  #12 (permalink)  
Старый 01.07.2022, 02:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Nexus
рони, 54-я строка - крутое решение, я до такого не додумался)
я тоже,
решение подсмотрено у https://javascript.ru/forum/members/4857-malleys/

тут https://javascript.ru/forum/misc/762...tml#post501108

строка 42

Последний раз редактировалось рони, 01.07.2022 в 02:32.
Ответить с цитированием
  #13 (permalink)  
Старый 01.07.2022, 10:26
Новичок на форуме
Отправить личное сообщение для sober Посмотреть профиль Найти все сообщения от sober
 
Регистрация: 30.06.2022
Сообщений: 6

Большое спасибо, оба варианта работают идеально. Вопрос решён.
Ответить с цитированием
  #14 (permalink)  
Старый 01.07.2022, 13:54
Новичок на форуме
Отправить личное сообщение для sober Посмотреть профиль Найти все сообщения от sober
 
Регистрация: 30.06.2022
Сообщений: 6

Сообщение от рони Посмотреть сообщение
вангую что нужна линейка блоков)))
Подскажите, как сделать несколько строчек блоков? В старом скрипте я задавал координаты каждого блока отдельно и мог устанавливать блоки в нужное место страницы.

<div class="square"id="square95" style = "left:1425px; top:0px;" onclick = "ChangeSign(95);"></div>
 <div class="square"id="square96" style = "left:1440px; top:0px;" onclick = "ChangeSign(96);"></div>
 <div class="square"id="square97" style = "left:1455px; top:0px;" onclick = "ChangeSign(97);"></div>
 <div class="square"id="square98" style = "left:1470px; top:0px;" onclick = "ChangeSign(98);"></div>
 <div class="square"id="square99" style = "left:1485px; top:0px;" onclick = "ChangeSign(99);"></div>


 <div class="square"id="square100" style = "left:0px; top:32px;" onclick = "ChangeSign(100);"></div>
 <div class="square"id="square101" style = "left:15px; top:32px;" onclick = "ChangeSign(101);"></div>
 <div class="square"id="square102" style = "left:30px; top:32px;" onclick = "ChangeSign(102);"></div>
 <div class="square"id="square103" style = "left:45px; top:32px;" onclick = "ChangeSign(103);"></div>


Теперь так не получится?
Ответить с цитированием
  #15 (permalink)  
Старый 01.07.2022, 14:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

sober,
рисуйте сами html, data-index="0" только укажите и onclick не нужно

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        #XO {
            background-color: #A5DEFF;
            display: flex;
        }
        div.square {
            height: 100px;
            width: 100px;
            cursor: pointer;
        }
        div.square img {
            height: 100px;
            width: 100px;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let src = ["https://via.placeholder.com/150/0000FF/FFFFFF/?text=+empty",  //заменить на свои ссылки 'empty.png' и т.д.
                "https://via.placeholder.com/150/0000FF/FFFFFF/?text=+circle",
                "https://via.placeholder.com/150/0000FF/FFFFFF/?text=+cross",
                "https://via.placeholder.com/150/0000FF/FFFFFF/?text=+dus",
                "https://via.placeholder.com/150/0000FF/FFFFFF/?text=+puat",
                "https://via.placeholder.com/150/0000FF/FFFFFF/?text=+chest",
                "https://via.placeholder.com/150/0000FF/FFFFFF/?text=+seem",
                "https://via.placeholder.com/150/0000FF/FFFFFF/?text=+voosem",
                "https://via.placeholder.com/150/0000FF/FFFFFF/?text=+deeviat",
                "https://via.placeholder.com/150/0000FF/FFFFFF/?text=+des",
                "https://via.placeholder.com/150/0000FF/FFFFFF/?text=+odincat"
            ];
            let len = src.length;

            let up = 1;
            document.addEventListener("keydown", function(e) {
                if (e.shiftKey) up = -1;
            })
            document.addEventListener("keyup", function(e) {
                up = 1;
            })
            document.addEventListener("click", function({
                target
            }) {
                if (target = target.closest(".square")) {
                    let index = +target.dataset.index;
                    index = (index + len + up) % len;
                    target.dataset.index = index;
                    target.querySelector("img").src = src[index];
                };
            })
        })
    </script>
</head>
<body>
    <div class="square" data-index="0"><img src = 'empty.png'></div>
    <div class="square" data-index="0"><img src = 'empty.png'></div>
</body>
</html>
Ответить с цитированием
  #16 (permalink)  
Старый 01.07.2022, 15:59
Новичок на форуме
Отправить личное сообщение для sober Посмотреть профиль Найти все сообщения от sober
 
Регистрация: 30.06.2022
Сообщений: 6

Сообщение от рони Посмотреть сообщение
sober,
рисуйте сами html, data-index="0" только укажите и onclick не нужно
Получилось так как хотел.
в стили добавил position:absolute;
div.square {
            position:absolute; 
            height: 32px;
            width: 15px;
            cursor: pointer;


сам код с координатами:
<body>
   <div class="square" style = "left:10px; top:100px;" data-index="0"><img src = 'empty.png'></div>
   <div class="square" style = "left:50px; top:100px;" data-index="0"><img src = 'empty.png'></div>
   <div class="square" style = "left:175px; top:100px;" data-index="0"><img src = 'empty.png'></div>
   <div class="square" style = "left:25px; top:200px;" data-index="0"><img src = 'empty.png'></div>
</body>


Еще раз спасибо за уделенное время!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена картинок. Как зациклить при нажатии? Aggao Общие вопросы Javascript 6 02.12.2014 16:38
смена картинок при нажатии sdff Общие вопросы Javascript 15 08.02.2014 17:08
Скрипт смены картинок от времени zoOmer Общие вопросы Javascript 2 09.09.2013 09:19
Скрипт смены картинок на каждый день года Артемий Б Работа 17 02.12.2010 22:49
Помогите создать скрипт замены картинок при наведении курсора. SantaS Я не знаю javascript 3 05.06.2009 12:59