Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.12.2015, 19:45
Аватар для Coriolan161
Профессор
Отправить личное сообщение для Coriolan161 Посмотреть профиль Найти все сообщения от Coriolan161
 
Регистрация: 21.11.2015
Сообщений: 443

А можно ли в конструкции .css('background', '') передавать URL бекграунда строкой?
Привет!

У меня такая конструкция: есть n блоков с бекграундами. У каждого свой. При mouseenter они пропадают. При mouseleave обратно появляются.
Мне интересно: кто сталкивался с неявным заданием URL-адреса в .css()???
Можно ли его задавать в виде строковой переменной???

Я забиваю все изображения в массив
array arr=array(n);
     arr[0]=' \'url(images/image0.png)  no-repeat\' ';
     arr[1]=' \'url(images/image1.png)  no-repeat\' ';
     ...
     arr[n]=' \'url(images/imagen.png) no-repeat\' ';


Дальше организую обработку событий
$('.block').on({
                        mouseenter: function() {
                                          $(this).css('backgroundImage', 'none');
                                                         },
 
                        mouseleave: function() {
                                              var number = $('.block').index(this);
                                              $(this).css('background', arr[number]);
                                                         }
        });


Таким образом я узнаю индекс блока в наборе и в качестве URL в .css() забиваю элемент массива с указанием соответствующего пути.

Таким образом - Ничего не работает! Поэтому и обращаюсь к вашему опыту.
Ответить с цитированием
  #2 (permalink)  
Старый 08.12.2015, 20:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,786

Coriolan161,
зачем плодить темы ... кто есть
Сообщение от Coriolan161
number
?
Сообщение от Coriolan161
Таким образом я узнаю индекс блока в наборе
где?
и
Сообщение от рони
вместо 'background' терзайте backgroundImage
Ответить с цитированием
  #3 (permalink)  
Старый 08.12.2015, 20:27
Аватар для Coriolan161
Профессор
Отправить личное сообщение для Coriolan161 Посмотреть профиль Найти все сообщения от Coriolan161
 
Регистрация: 21.11.2015
Сообщений: 443

рони,
number - это переменная для хранения индекса блока в наборе (блоков).

var number = $('.block').index(this);
Ответить с цитированием
  #4 (permalink)  
Старый 08.12.2015, 20:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,786

Coriolan161,
а это что
Сообщение от Coriolan161
array arr=array(n);
Ответить с цитированием
  #5 (permalink)  
Старый 08.12.2015, 20:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,786

Coriolan161,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
      .capabilitySection-block{
        height: 80px;
        float: left;
         width: 200px;
         background-image:  url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif);
          background-repeat: no-repeat;
         background-size: 100% 100%;
      }
      .capabilitySection-label{
        padding-top: 120px;
      }
      .capabilitySection-comment{
        opacity:0;
      }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
   $(function() {
      var arr = ['url(http://javascript.ru/forum/images/smilies/sad.gif)',
                 'url(http://javascript.ru/forum/images/smilies/cray.gif)',
                 'url(http://javascript.ru/forum/images/smilies/dance3.gif)'];

      $('.capabilitySection-block').on({
          mouseenter: function() {
              $('.capabilitySection-label', this).stop(true, true).animate({
                  paddingTop: '0px'
              }, 'slow');
              $(this).css('backgroundImage', 'none');
              $('.capabilitySection-comment', this).stop(true, true).animate({
                  opacity: '1'
              }, 'slow');
          },
          mouseleave: function() {
              $('.capabilitySection-label', this).stop(true, true).animate({
                  paddingTop: '120px'
              }, 'slow');
              var i = $('.capabilitySection-block').index(this);
              $(this).css('backgroundImage', arr[i]);
              $('.capabilitySection-comment', this).stop(true, true).animate({
                  opacity: '0'
              }, 'slow');
          }
      });

  });

  </script>
</head>

<body>

<div class="capabilitySection">
    <div class="capabilitySection-block">
        <p  class="capabilitySection-comment">Появляющийся коммент</p>
        <p  class="capabilitySection-label">Подпись</p>
    </div>
    <div class="capabilitySection-block">
        <p  class="capabilitySection-comment">Появляющийся коммент</p>
        <p  class="capabilitySection-label">Подпись</p>
    </div>
     <div class="capabilitySection-block">
        <p  class="capabilitySection-comment">Появляющийся коммент</p>
        <p  class="capabilitySection-label">Подпись</p>
    </div>
<!--..... и таких блоков (capabilitySection-block)ещё пятеро-->
</div>
</body>

</html>
Ответить с цитированием
  #6 (permalink)  
Старый 08.12.2015, 20:44
Аватар для Coriolan161
Профессор
Отправить личное сообщение для Coriolan161 Посмотреть профиль Найти все сообщения от Coriolan161
 
Регистрация: 21.11.2015
Сообщений: 443

рони,
Всё. Окончательно разобрался. Осознал свои ошибки.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как можно узнать когда "якорь" пропал с URL ? Krava Элементы интерфейса 3 14.12.2012 18:25
можно ли Заменить URL? max00077 Общие вопросы Javascript 1 11.12.2011 04:15
Водяной знак на fancybox bobrina Общие вопросы Javascript 1 03.06.2011 20:11
Как можно изменить URL в адресной строке браузера? балерун Events/DOM/Window 12 17.11.2009 12:08