Показать сообщение отдельно
  #3 (permalink)  
Старый 03.07.2014, 00:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

вариант ...
<!DOCTYPE HTML>
<html>
  <head>
  <meta charset="utf-8">
  <style>
    #myUl{
      list-style: none;
      width: 120px;
      padding: 0;
      margin: 0;
      overflow: hidden;
    }
  	#myUl li{
      float: left;
      width: 50px;
      height: 50px;
      border: 2px solid #FFA000;
      margin-right: 5px;
      margin-bottom: 5px;
    }
    #myUl li.active{
      border: 2px solid #ff0000;
    }
  </style>
  </head>
  <body>
    <div id="myHead"></div>
	<ul id="myUl">
      <li head="Заг А.">A</li>
      <li head="Заг Б..">Б</li>
      <li head="Заг В...">В</li>
      <li head="Заг Г....">Г</li>
    </ul>
    <script>
      var myUl    = document.getElementById('myUl'),
          myHead  = document.getElementById('myHead'),
          UlInner = myUl.children,
          j       =  -1,
          elem,
          is;

	  function spt(e,el){
        elem && (elem.className = '');
        j = ++j % UlInner.length ;
        elem = el || UlInner[j];
        myHead.innerHTML = elem.getAttribute('head');
        elem.className = 'active';
        !el && (is = window.setTimeout(spt, 1000));

      }
      spt();
      myUl.onmousemove = function (e){  window.clearTimeout(is);
         var target = e && e.target || event.srcElement;
         if(target.tagName == 'LI') spt(e,target);
      }
      myUl.onmouseout = spt
    </script>

  </body>
</html>
Ответить с цитированием