Question

我有一个居中的大型div，里面有一个图像，在该图像中是右边的门。我想要这样做，当你点击门口时，它'缩放'到下一个图像，这将是下一个房间。

描述它的最佳方式类似于街景视图在Google地图上播出时的效果。

有人可以帮忙吗？最好是jQuery，但我对任何事情都持开放态度。尝试了一些像插件一样的Zoom，但没有任何影响。

理想的解决方案是转到另一个Div，这样我就可以控制下一个“房间”内的内容（我在每个“房间”都有交互式对象）。

希望这有道理吗？

示例我正在处理：http://www.ether-game.com/new

Answer 1

你在找这个吗？

http://jsfiddle.net/F9vhD/

你只需要将一个div移动到自己宽度的-100％左右，另一个则相同。

<强> HTML：

<div class="room" id="room1">
Room 1
<input type="button" id="nextRoom" value="go to next room" />
</div>
<div class="room" id="room2">
 s
</div>

<强> CSS：

html,body {
    width:100%;
    height:100%;
    overflow:hidden
}

body {
    margin:0;
    padding:0;
    color:#fff
}

.room {
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0
}

#room1 {
    background:red;
}

#room2 {
    background: blue;
    left:100%
}

<强> JS：

$(document).ready(function() {

    $('#nextRoom').on('click', function() {
            $('#room1').animate({left:'-100%'}); 
        $('#room2').animate({left:'0%'});
    });

});

从一个Div到另一个Div进入“隔壁房间”效果

1 个答案: