gpt4 book ai didi

javascript - 旋转图像 "overlaps"其他html元素

转载 作者:行者123 更新时间:2023-11-28 06:56:00 24 4
gpt4 key购买 nike

我想通过单击按钮来旋转图像,但是当我这样做时,图像与按钮重叠。我怎样才能做到这一点?

我的代码和示例 here (http://jsfiddle.net/jj03b17n/5/)。

发生了什么:

enter image description here

我想要什么:

enter image description here

JS轮换代码:

        $(optionsPreview.rotateRightBt).unbind("click").click(function () {
var deg = $(optionsPreview.img).data('rotate') || 0;

if (deg == 0) deg = 90;
else deg = deg + 90 == 360 ? 0 : deg + 90

$(optionsPreview.img).data('rotate', deg);

var rotate = 'rotate(' + deg + 'deg)';
$(optionsPreview.img).css({
'-webkit-transform': rotate,
'-moz-transform': rotate,
'-o-transform': rotate,
'-ms-transform': rotate,
'transform': rotate
});
return false;
});

最佳答案

您可以使用 jQuery 通过获取图像的当前大小来设置 .tdBarPreviewmargin-top,例如,如果图像根本没有缩放那么下面的代码就可以工作了,现在当图像缩放时,获取其大小并相应地更改以下 margin-top 属性。

.tdBarPreview
{
display:block;
margin-top:20px;
}

关于javascript - 旋转图像 "overlaps"其他html元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32569604/

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