2

I'm trying to have an image enlarge using jQuery while keeping it centered. I've tried adding a 'right' animation property, but it hasn't helped.

Here is the live version of the page. Click on Student or Guest to see the animation.

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;
}
4

1 回答 1

3

jsFiddle 缩放演示

根据包括聊天在内的先前评论，将28超大图像（@ 1792 x 1054）更改为较小的图像不仅会增加这些图像的加载时间（即 14 MB 仅在 28 个图像中），它还有助于防止在执行时出现视觉伪影图像交换为您的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而言，同时为 the和 the设置动画是正确的height。然而，这并不能解决缩放时的居中问题image map，这会导致未对齐在视觉上很明显。

根据我们在聊天中的评论，在这种情况下，最好的解决方案是通过属性从CSS到CSS3使用缩放技术。transform:scale()它在所有现代浏览器中都很友好，并且可以在对象缩放时同时进行居中。

服务器上方的 jsFiddle 作为此在线演示的示例，因此您可以替换您的image map标记。

于 2012-12-23T08:42:59.080 回答