滑动div时如何移动和缩小图像？

Question

我附上了一张图片，说明了我的目的。 http://postimage.org/image/9cmg2z8vv/

默认情况下，id喜欢在页面中间居中的大型横向或纵向图像。单击图像时，div应从右侧滑入。 div应该将大图像从屏幕的中心向左推50％，大图像应缩小以适应屏幕左侧的50％。

你知道如何解决这个问题吗？

Answer 1

这是一个原始的javascript版本。不是最好的，但让你开始。我看不到你的HTML，所以我不知道其他div中的div是什么，但你基本上可以用转换做同样的事情。

http://jsfiddle.net/jMwWK/1/

<div id="content">
    <div id="holder">
        <div id="image"></div>
    </div>
</div>
<div id="slider"></div>

$(document).ready(function(){
    setTimeout(function(){
        $('#slider').animate({left: '-200px'});
        $('#holder').animate({width: '50%'});
    },1000);
});