Question

我有一个div容器分为象限。每个象限都有一个容器大小的图像，但裁剪到该象限。在鼠标悬停时，我想让象限展开以适合容器。我的挑战是将图像放在DIV中。左上角的图像很好，所有其他图像都对齐到它们所在的跨度的左上角，我需要所有图像在左上角对齐。看this fiddle它可能会更有意义。

基本上所有的图像都应该具有相同的位置，完全堆叠在一起，只有一个象限基于z-index暴露，以及它们所在的跨度.jquery将在鼠标悬停时显示完整的图像。

以防您没有看到the fiddle here：

    <!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>

由于

Answer 1

想出来。 click here to see the fiddle现在要制作或淡化过渡。

跨度内的图像位置

1 个答案: