Показать сообщение отдельно
  #4 (permalink)  
Старый 25.11.2010, 10:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

dr.5y51em,
тоже самое с интуитивной тудемой сюдемой ))) и для любого количества блоков
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
<style type="text/css">
*{
 margin: 0px;
 padding: 0px;
}

#bg {
    background: #00FF00;
    position: absolute;
    overflow: hidden;
    }
#show{
    position: absolute;
    overflow: hidden;
    background: #FFFF00;
    overflow: hidden;
    }
._div{
    border: 4px solid #000;
    background: blue;
    color: white;
    text-align: center;
    width: 700px;
    height: 700px;
    float: left;
    }
</style>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    var b = 4;//величина бордюра ._div
    $('#bg').css({'width': $(window).width(),'height':$(window).height()});
    $('#show').css('width', $('#bg').width()*$('div._div').length);
    $('._div').css({'margin-left':($('#bg').width() - $('div._div').width())/2-b*2,
    'margin-right':($('#bg').width() - $('div._div').width())/2  } );
    $('._div').css('height', $(window).height()-b*2);
    function go(n){
      $('#show').animate({"left":n+"="+$('#bg').width()},1000);
    }
    $('._div').not(":first,:last").click( function(event){
    if(event.pageX>$(window).width()/2){go("-")}
    else {go("+")};});
    $('._div:first').click(function(){go("-")});
    $('._div:last').click( function(){go("+")});
});
</script>
</head>
<body>
<div id="bg">
     <div id="show">
    <div class="_div" id="div1">div 1</div>
    <div class="_div" id="div2">div 2</div>
    <div class="_div" id="div3">div 3</div>
    <div class="_div" id="div4">div 4</div>
    <div class="_div" id="div5">div 5</div>
    <div class="_div" id="div6">div 6</div>
    </div>
</div>
</body>
</html>
Ответить с цитированием