положение изображения в диапазоне - PullRequest
Новая
       2

положение изображения в диапазоне

0 голосов
/ 16 марта 2012

У меня есть контейнер div, разбитый на квадранты. Каждый квадрант имеет изображение размера контейнера, но обрезается до этого квадранта. При наведении курсора мыши я хочу расширить сектор, чтобы он соответствовал контейнеру. Моя задача - расположить изображения в DIV. С верхним левым изображением все в порядке, все остальные изображения выровнены по левому верхнему углу интервала, в котором они находятся, и мне нужно, чтобы все изображения выровнялись по левому верхнему углу. Посмотрите эту скрипку , возможно, будет разумнее взглянуть на нее.

По сути, все изображения должны иметь одинаковую позицию, расположенную точно друг на друге, с экспонированием только одного квадранта в зависимости от z-индекса и диапазона, в котором они находятся. Jquery покажет полное изображение при наведении мыши.

На всякий случай, если вы не видели скрипку здесь : 

    <!DOCTYPE html>
    <html>
    <head>

      <script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
  #containter {background: black; height:500; width:800px; padding:0px; overflow: hidden;}
  #top-left {position: absolute; top:0px; left: 0px; height:250px; width:400px; padding:0px; overflow: hidden; z-index: 1; }
  #top-right {position: absolute; top:0px; left:400px; height: 250px; width:400px; overflow:hidden;z-index: 2;}
  #bottom-left {position: absolute; top:250px; left:0px; height:250px; width:400px; padding:0px; overflow: hidden; z-index: 3; }
  #bottom-right {position: absolute; top:250px; left: 400px; height:250px; width:400px; padding:0px; overflow: hidden; z-index: 4; }
</style>
    </head>
    <body>

    <div id="box">
        <span id="top-left">
            <image src="http://2.bp.blogspot.com/_Otv4_7K3yfk/TTxZykkA4cI/AAAAAAAAAcM/bQFOHrc5fyQ/s1600/Wallpapers_Nature+%25288%2529.jpg">
        </span>
        <span id="top-right">
            <image  src="http://www.adywallpapers.com/nature/260_nature_wallpapers.jpg">
       </span>
       <span id="bottom-right">
                    <image src="http://www.adywallpapers.com/nature/101_nature_wallpapers.jpg">
        </span>
        <span id="bottom-left">
                    <image src="http://www.adywallpapers.com/nature/192_nature_wallpapers.jpg">
        </span>     
    </div>

    <script>
      $("#top-left").mouseover(function() {
            $( this ).css( "width","+=400");
            $( this ).css( "height","+=250" );
            $( this ).css("z-index", "100");
        });
      $("#top-left").mouseout(function() {
            $( this ).css( "width","-=400");
            $( this ).css( "height","-=250" );
            $( this ).css("z-index", "1");
        });
      $("#bottom-left").mouseover(function() {
            $( this ).css( "width","+=400");
            $( this ).css( "height","+=250" );
            $( this ).css("z-index", "100");
        });
      $("#bottom-left").mouseout(function() {
            $( this ).css( "width","-=400");
            $( this ).css( "height","-=250" );        
            $( this ).css("z-index", "3");
      });

    $("#top-right").mouseover(function() {
            $( this ).css( "width","+=400");
            $( this ).css( "height","+=250" );
            $( this ).css("z-index", "100");
        });
    $("#top-right").mouseout(function() {
            $( this ).css( "width","-=400");
            $( this ).css( "height","-=250" );
            $( this ).css("z-index", "2");        
       });
    $("#bottom-right").mouseover(function() {
            $( this ).css( "width","+=400");
            $( this ).css( "height","+=250" );
            $( this ).css("z-index", "100");
       });
    $("#bottom-right").mouseout(function() {
            $( this ).css( "width","-=400");
            $( this ).css( "height","-=250" );    
            $( this ).css("z-index", "4");        
    });
    </script>

    </body>
    </html>

Спасибо

1 Ответ

0 голосов
/ 16 марта 2012

Разобрался. Нажмите здесь, чтобы увидеть скрипку Теперь, чтобы оживить или исчезнуть переход.

...