Question

我一直在尝试在我的网站上制作此菜单，第一步是在点击它时进行扩展。每张照片都是独立的，但在同一个div中。我该怎样以最好的方式做到这一点？

<script src="jquery-1.11.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
<body>
<div id="prototype">
<img style="height: 100px; width: 100px; position: absolute;"src="prototype1.png" alt="menu1">

<img style="height: 100px; width: 100px;position: absolute;" src="prototype2.png" alt="menu2">

<img style="height: 100px; width: 100px;position: absolute;" src="prototype3.png" alt="menu3">

<img style="height: 100px; width: 100px;position: absolute;" src="prototype4.png" alt="menu4">

<img style="height: 100px; width: 100px;position: absolute;" src="prototype5.png" alt="menu5">

<img style="height: 100px; width: 100px;position: absolute;" src="prototype6.png" alt="menu6">
</div>

到目前为止我的jQuery

$("#prototype").one('click', function(){
    $(this).fadeOut(400).fadeIn(400).fadeOut(400).fadeIn(400).animate({
        'width': '+=400px',
        'height': '+=700px'}, "slow");
});

然后是我的CSS：

#prototype { 
    position: absolute;
    top: 45%;
    left: 47.5%;
}

不幸的是，它最终看起来像是这样的。

http://bthem.goerann.com/

Answer 1

如果您正在寻找放大/缩放图片，那么这个问题是否有用？

simple Jquery hover enlarge

来自所选答案的

摘录：

$('#content img').hover(function() {
    $(this).css("cursor", "pointer");
    $(this).toggle("scale",{
      percent: "90%"
    },500);

}, function() {
    $(this).toggle("scale",{
      percent: "80%"
    },500);

});

更新（回应评论）：

尝试.animate以及缩放。通过过渡来抵消感知的比例移动，以保持图像居中。

$('#div').effect('scale'{
    percent:200
},1000);

$('#div').animate({
    left:100,
    top:100
},1000);

如何使用jQuery将我的6张图片向外扩展？

1 个答案: