Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.04.2016, 12:21
Интересующийся
Отправить личное сообщение для galiog Посмотреть профиль Найти все сообщения от galiog
 
Регистрация: 28.04.2016
Сообщений: 17

Постепенное открытие картинки
Здравствуйте. Стоит следующая задача:
есть картинка и необходимо постепенно ее открывать. Чтобы было понятнее вот как сейчас реализовано:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
     <script src="script.js"></script>
    <style>
        .block{
         position:absolute;
            width:423px;
        height: 423px;
        }
        .white{
        background-color:black;
        width:141px;
        height: 141px;
            float:left;
            position: relative;
         }
        .wrapper{
        width:423px;
        height: 423px;
        }
    </style>
</head>
<body>
    <div class="block"><img src="5087_msize.jpg"></div>
    <div class="wrapper">   
    <div class="white" id="1"></div>
    <div class="white" id="2"></div>
    <div class="white" id="3"></div>
    <div class="white" id="4"></div>
    <div class="white" id="5"></div>
    <div class="white" id="6"></div>
    <div class="white" id="7"></div>
    <div class="white" id="8"></div>
    <div class="white" id="9"></div>
    </div>
</body>
</html>

Тут у нас блок с картинкой, и поверх ее 9 блоков с черными квадратами. Затем яваскриптом делаю так, чтобы эти блоки исчезали в рендомном порядке.
$(document).ready(function(){
function randomInteger(min, max) {
    var rand = min - 0.5 + Math.random() * (max - min + 1)
    rand = Math.round(rand);
    return rand;
  }

var random;
var timerId = setInterval(function() {
random = randomInteger(1,9);
console.log(random);
$("#"+random).css("background-color","transparent");
}, 1000);
});

Сразу сталкиваюсь с такой проблемой: когда я рендомно генерирую числа, они повторяются. И как следствие блок с каким либо ID может очень долго не пропадать. У меня есть мысль что стоило бы все блоки заключить в массив и рендомно выбирать значение оттуда, после чего убирать его из массива и проводить следующую итерацию. Но как это сделать не совсем понимаю
Ответить с цитированием
  #2 (permalink)  
Старый 28.04.2016, 16:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,055

galiog,
добавляйте класс -- соберите элементы без этого класса, если есть такие, выберите случайно из них любой, повторите действия если таких нет обнулите интервал.
Ответить с цитированием
  #3 (permalink)  
Старый 28.04.2016, 16:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,055

открытие картинки случайными блоками
galiog,
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
     <script>
$(function() {
    var a = $(".white");
    (function c() {
        a = a.filter(":not(.air)");
        var b = a.length;
        b && (b = Math.random() * b | 0, a.eq(b).addClass("air"), window.setTimeout(c, 1000))
    })()
});</script>
    <style>
        .white.air {
          background-color: transparent;
        }

        .block, .block img{
         position:absolute;
            width:423px;
        height: 423px;
        }
        .white{
        background-color:black;
        width:141px;
        height: 141px;
            float:left;
            position: relative;
         }
        .wrapper{
        width:423px;
        height: 423px;
        }

    </style>
</head>
<body>
    <div class="block"><img src="http://profismart.org/album/02/852_Manowar_5.jpg"></div>
    <div class="wrapper">
    <div class="white" id="1"></div>
    <div class="white" id="2"></div>
    <div class="white" id="3"></div>
    <div class="white" id="4"></div>
    <div class="white" id="5"></div>
    <div class="white" id="6"></div>
    <div class="white" id="7"></div>
    <div class="white" id="8"></div>
    <div class="white" id="9"></div>
    </div>
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 28.04.2016, 18:13
Интересующийся
Отправить личное сообщение для galiog Посмотреть профиль Найти все сообщения от galiog
 
Регистрация: 28.04.2016
Сообщений: 17

Большое спасибо!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Разделение на 3 картинки и их открытие при наведении курсора Михаил_Michail Элементы интерфейса 1 07.07.2014 12:11
Открытие картинки Илья__ Общие вопросы Javascript 1 14.04.2014 18:52
Открытие нового окна шириной 100 пикс и его постепенное расширение на весь экран RainMan Events/DOM/Window 5 13.05.2012 20:56
Открытие картинки в новом окне при клике на ссылку. J77 Общие вопросы Javascript 2 08.12.2009 08:09
Как изменить размер картинки? Mihail Общие вопросы Javascript 1 25.10.2009 13:42