Question

在悬停时，我想缩放缩放的.itemWrapper ..但是，缩放效果是将其他图像从其位置移动..如何解决这个问题，当我悬停时，div被缩放而不移动另一个图象？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="salehover.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js?ver=1.4.0"></script>

<script type="text/javascript">

$(document).ready(function(){
$(".itemWrapper").css({"border":"1px red solid"});
$(".itemWrapper").hover(function()
{ var Salon_Text = $(this).find(".icon_salon").children("span"); 
    var ind = ($(".itemWrapper")).index($(this));
    $(this).css({"z-index":"10"});
    $(this).next("..itemWrapper").css({"margin-left":"14px"});
    $(this).stop().animate({"width":"228px","height":"222px"});
    $(this).css({"top":"-14px","left":"-14px"});console.log($(".itemWrapper:nth-child("+(ind+2)+")").attr("class"));
},
function()
{

    $(".itemImage img",$(this)).stop().animate({"width":"196px","height":"180px"});
    $(this).stop().animate({"width":"218px","height":"200px"});
    $('.icon_salon',$(this)).children('img').toggle();
    $(this).css({"top":"14px","left":"14px"});
});
});
</script>
</head>

<body>


<div class="selectionBoxes">
                <div class="itemWrapper 1">
                    <div class="item">
                    <div class="hovering">
                        <div class="shadow">
                        <div class="itemImage">
                            <img src="../../images/box-salon.png" width="196" height="178" alt="Salon"/>
                        </div>
                        </div>  
                        <div class="icon_salon"> <img src="../../images/icon-salon.png" width="52"/> <img src="../../images/icon-salon_on1.png" style="display:none;" width="54" height="40"/>                  
                                <span>SALON</span>

                        </div>
                        </div>
                        </div>
                    </div>   
                <div class="itemWrapper 2">
                <div class="item">
                  <div class="hovering">
                  <div class="shadow">
                    <div class="itemImage"><img src="../../images/box-chambre.png" width="196" height="178" alt="Salon"/></div></div>
                    <div class="icon_salon"><img src="../../images/icon-chambre.png" width="54" height="40" /><img src="../../images/icon-chambre_on1.png" style="display:none;" width="54" height="40"/>

                        <span>CHAMBRE</span>
                    </div>
                    </div>
                </div>
              </div>
              <div class="itemWrapper 3">
                <div class="item">
                   <div class="hovering">
                       <div class="shadow">
                            <div class="itemImage"><img src="../../images/box-bureau.png" width="196" height="178" alt="Salon"/></div>
                       </div>
                        <div class="icon_salon"><img src="../../images/icon-bureau.png" width="54" height="40" /><img src="../../images/icon-bureau_on.png" style="display:none;" width="54" height="40" />
                            <span>BUREAU</span>
                        </div>
                    </div>
                  </div>  
                </div>
                <div class="itemWrapper 4">
                <div class="item">
                  <div class="hovering">
                  <div class="shadow">
                    <div class="itemImage"><img src="../../images/box-cuisine.png" width="196" height="178" alt="Salon"/></div></div>  
                    <div class="icon_salon"><img src="../../images/icon-cuisine.png" width="54" height="40" /><img src="../../images/icon-cuisine_on.png" style="display:none;" width="54" height="40" />
                        <span>CUISINE</span>
                    </div>
                   </div>

                 </div>
              </div>
              </div>

</body>
</html>

/ * Css * / .icon_salon {width：110px; 身高：110px;} / 加 / .selectionBoxes {height：200px;填充顶：30PX;} .selectionBoxes .itemWrapper {position：relative;向左飘浮;保证金左：20像素;光标：指针;} .item span {color：＃5d5c5c;显示：块;填充左：65px;边距：-20px;} .shadow {background：url（../../ images / images / shadowbitu.png）no-repeat right bottom;宽度：218px;高度：200像素;}

Answer 1

正在尝试这样做：

参见演示：http://jsfiddle.net/rathoreahsan/jKTVn/5/

如何在不移动其他图片的情况下缩放此图库？

1 个答案: