Question

我尝试了一些事情，但我不确定我的问题是代码还是框架竞争。对于披露，我在一个aspx站点，链接css，Kentico 10，使用jquery，jquery ui和bootstrap。

我正在做什么：通过jquery替换img src。这很有效。

目标：并非所有图像都具有相同的尺寸。我想要图像的尺寸为＃34;动画＆＃34;旧图像源的旧尺寸和大小之间。正如您所料，它正在做的只是闪烁到新的大小。周围的布局对象只是传送到新的位置。

问题：我应用于图片标签的转换似乎没有蹲下。

代码...请注意，CSS类productImage的图像标记位于转发器中：

CSS：

.mainImage {
    max-width: 551px;
    cursor: pointer;
    -webkit-transition: all .6s ease-in-out !important;
    -moz-transition: all .6s ease-in-out !important;
    -o-transition: all .6s ease-in-out !important;
    -ms-transition: all .6s ease-in-out !important;
    transition: all .6s ease-in-out !important;
}

HTML：

这是主图像，即改变img src的目标。

<div class="col-md-6">
    <asp:Image ImageUrl="http://placehold.it/551x373" runat="server" ID="imgProduct" AlternateText="Product Image" ToolTip="Product Image" CssClass="mainImage" />
</div>

...

这是您单击的图像缩略图，它会触发javsacript src替换并位于转发器内。请注意，data-target属性设置为服务器端，仅包含我们希望将主映像更改为的src网址的URL。

<div class="col-sm-1">
    <asp:Image ImageUrl="http://placehold.it/64x64" runat="server" ID="img1" AlternateText="Product Image" ToolTip="Product Image" CssClass="productImage" onclick="ShowImage(this);" />
</div>

JavaScript的：

function ShowImage(ctl) { //this is already a jquery item...
    var targetImage = $("#<%= imgProduct.ClientID %>");    
    targetImage.attr("src", $(ctl).attr("data-target"));
}

$(document).ready(function () {
    ShowImage($("[id$='img1']:first"));
});

Answer 1

要使高度和宽度过渡起作用，您需要在CSS或样式标记中指定高度和宽度。

您似乎正在交换图片网址并让图片的原始尺寸（由placehold.it的网址提供）来设置布局。如果没有动画参数，浏览器会立即重新渲染布局而不进行任何转换。

替换img src，缓解高度/宽度差异？

1 个答案: