gpt4 book ai didi

jquery - 如何使用 jQuery 让我的 6 张图片向外展开?

转载 作者:太空宇宙 更新时间:2023-11-04 11:09:27 25 4
gpt4 key购买 nike

我一直在尝试在我的网站上制作这个菜单,第一步是让它在点击时展开。每张图片都是独立的,但在同一个 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/

最佳答案

如果您想放大/缩放图像,那么这个 SO 问题会有帮助吗?

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 - 如何使用 jQuery 让我的 6 张图片向外展开?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33739760/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com