Показать сообщение отдельно
  #7 (permalink)  
Старый 17.10.2013, 21:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

Giddeon, жать на жёлтый прямоугольник потом на синий, слабонервным в код не вглядываться )))
<!DOCTYPE html>
<html>
<head>
  <title>Grace</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
</script>
  <style type="text/css">
*{margin:0;padding:0}
    html,body{height:100%;overflow:hidden}
    body{background:#FDF5E6}
    #header{width:100%;height:16%;background:#C9C}
    h1{color:#C0C0C0;font-size:xx-large}
    ul{margin-left:70%}
    li{display:inline-block;margin-left:2%}
    #lent{width:70%;height:30%;font-size:0;margin-left:16%;margin-top:15%}
    #first,#second,#third,#forth{height:100%;width:25%;display:inline-block}
    #first,#hidden1{background:#00F}
    #second,#hidden2{background:#FF0}
    #third,#hidden3{background:#008000}
    #forth,#hidden4{background:#F00}
    #hidden1,#hidden2,#hidden3,#hidden4{width:100%;height:79%;margin-top:26.5%;position:absolute}
    .selected{
      border: #00CED1 5px dashed;
    }

  </style>
  <script>
$(document).ready(function() { var flag = false ;
  $('#first').click(function() {  if(flag) return;flag = true;

  $('#hidden1').show();
  setTimeout( function() {
  $('#lent').animate({
  width: '100%',
  height: '5%',
  marginTop: '0%',
  marginLeft: '0%'
  }, 2000);
  }, 750);
  $('#hidden1').animate({
  marginTop: '0%'
  }, 1000);
  $('#hidden1').addClass('selected');
  $('#lent').addClass('compressed');
  });

  $('#second').click(function() {  if(flag) return;flag = true;
  if($('#lent').hasClass('compressed')) {}
  else {
  $('#hidden1').css('margin-left', '100%');
  $('#hidden1').css('margin-top', '0%');
  $('#hidden2').show();
  setTimeout( function() {
  $('#lent').animate({
  width: '100%',
  height: '5%',
  marginTop: '0%',
  marginLeft: '0%'
  }, 2000);
  }, 750);
  $('#hidden2').animate({
  marginTop: '0%'
  }, 1000);
  $('#hidden2').addClass('selected');
  $('#lent').addClass('compressed');
  }
  });

  $('#third').click(function() { if(flag) return;flag = true;
  if($('#lent').hasClass('compressed')) {}
  else {
  $('#hidden3').show();
  setTimeout( function() {
  $('#lent').animate({
  width: '100%',
  height: '5%',
  marginTop: '0%',
  marginLeft: '0%'
  }, 2000);
  }, 750);
  $('#hidden3').animate({
  marginTop: '0%'
  }, 1000);
  $('#hidden3').addClass('selected');
  $('#lent').addClass('compressed');
  }
  });

  $('#forth').click(function() {  if(flag) return;flag = true;
  if($('#lent').hasClass('compressed')) {}
  else{
  $('#hidden4').show();
  setTimeout( function() {
  $('#lent').animate({
  width: '100%',
  height: '5%',
  marginTop: '0%',
  marginLeft: '0%'
  }, 2000);
  }, 750);
  $('#hidden4').animate({
  marginTop: '0%'
  }, 1000);
  $('#hidden4').addClass('selected');
    $('#lent').addClass('compressed');
    }
  });

  });
  </script>
  <script>
$(document).ready(function () {
        $('#first').click(function() {
        if($('#lent').hasClass('compressed')) {
            if($('#hidden1').hasClass('selected')) {}
            else {
                $('#hidden1').show();
                $('#hidden1').animate({
                marginLeft: '0%'
                }, 1000);
               $('.selected').animate({
                marginLeft: '-100%'
                }, 1000, function(){
                $('.selected').css('margin-left', '100%').removeClass('selected');
                $('#hidden1').addClass('selected');

                });
                }




            }
        });
  });
  </script>
</head>

<body>
  <div id='header'>
    <h1>Grace</h1>

    <ul>
      <li>Production</li>

      <li>Gallery</li>

      <li>About</li>

      <li>Contacts</li>
    </ul>
  </div>

  <div id='lent'>
    <div id='first'><img src='' alt=''></div>

    <div id='second'><img src='' alt=''></div>

    <div id='third'><img src='' alt=''></div>

    <div id='forth'><img src='' alt=''></div>
  </div>

  <div id='hidden1'></div>

  <div id='hidden2'></div>

  <div id='hidden3'></div>

  <div id='hidden4'></div>
</body>
</html>

Последний раз редактировалось рони, 31.10.2013 в 16:38.
Ответить с цитированием