gpt4 book ai didi

javascript - 单击更改元素位置

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

我在 jQuery Mobile 中有这段代码,当我单击图像时它会变大。

我需要图像向左和向上移动。

我试试这个:

<div class="ui-block-b">
<p><img id="zPIC" height="150" width="150" onclick="ZX();"/></p>
</div>


function ZX() {
var img = $("#zPIC");
if (img.width() < 200) {
img.animate({ width: "200px", height: "200px", left: "20px", top: "20px" }, 1000);
}
else {
img.animate({ width: img.attr("width"), height: img.attr("height") }, 1000);
}
}

但是图片只增长不横向移动

最佳答案

您需要设置位置属性,例如相对或绝对。例如:

<div id="zPIC" style="position:relative; width:150px; min-height:150px; background:green"></div>

$(document).ready(function(){
$("#zPIC").click(function(){
if ($("#zPIC").width() < 200) {
// store the original sizes
$(this).data('width', $(this).css('width'));
$(this).data('height', $(this).css('height'));
$("#zPIC").animate({ width: "200px", height: "200px", left: "20px", top: "20px" }, 1000);
}
else {
$("#zPIC").animate({ width: $(this).data('width'), height: $(this).data('height'), }, 1000);
}
});
});

关于javascript - 单击更改元素位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25058820/

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