Question

我正在尝试使用jQuery进行图像放大，同时保持其居中。我已经尝试添加'right'动画属性，但它没有帮助。

Here是该页面的实时版本。单击学生或访客以查看动画。

jQuery的：

var studFocusWidth = 1000;
var studFocusChange = 165;
var chartSpeed = 700;

function goToStud() {
    $('#chart').attr("usemap", "studmap")
    .animate({
        'width': studFocusWidth,
        'right': studFocusChange
    }, chartSpeed)
    .attr("src", "images/chartsfocus.png");

    $('h3').html("Select a Section");
    $('#chartback').addClass("studback").fadeIn(chartSpeed);

}

// There is a second function for the guest section

HTML：

<div id="chartframe">
    <!-- image maps omitted -->
    <img id="chart" src="images/chartstart.png" usemap="#chartmap" alt="Chart" />
</div>

CSS：

#chartframe {
    width: 100%;
    overflow: hidden;
    text-align: center;
    margin: 0px;
}

#chart {
    width:640px;
    position: relative;
}

Answer 1

jsFiddle ZOOM Demo

根据之前的评论，包括chat，更换 28 非常大的图片（ @ 1792 x 1054 ）只增加这些图像的加载时间（只有28个图像中的14 MB ），它还有助于防止为image map进行图像交换时的视觉瑕疵（即，休息区照片）。

由于您定义的最大宽度为600px，因此图像宽度所需的确切尺寸取决于您要使用多少ZOOM ...以便在缩放时使用时保留视觉质量水平。对于一般示例，如果您要缩放图像200%，则图像的最大宽度应为1200px（600px乘以2，其中600px是您的容器div已修复width）。

最有可能的是，你不会缩放那么大，所以在计算最终宽度时要使用百分比。如果您缩放25％，那么它是600px times 25% which gives you 150px，那么150px会被添加到容器div width of 600px，这会为您提供750px的图片宽度。您刚刚对 1000px不必要的图片width数据进行了剃须。

就目前的 jQuery缩放动画而言，同时为width和height制作动画是正确的。然而，这并没有解决image map的缩放时的居中，这会导致错误对齐在视觉上显而易见。

根据我们在聊天中的评论，该案例中的最佳解决方案是从CSS升级到CSS3并通过 {{1}使用缩放技术 } 属性。它在所有现代浏览器中都很友好，在对象缩放时同时负责居中，所有同时。

以上服务器上的jsFiddle作为this online demo的示例，因此您可以取代transform:scale()标记。

jQuery放大图像但保持居中

1 个答案: