我在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);
}
});
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句