image - 滑动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);
});