Я собираюсь начать работу над созданием веб-сайта.Дизайн находится в формате контента, сидящего сзади, и вы нажимаете на него, чтобы вывести его на передний план.В порядке стека.Дизайн Здесь
Основная концепция - следовать идее JQuery Roundabout.Но проблема в том, что у меня возникает проблема, когда HTML добавляется в каждое поле, когда он перемещается назад, он неправильно масштабируется.Он сохраняет тот же размер.В идеале, я бы хотел, чтобы оно соответствовало масштабу, но не сильно смотрелось.
Есть идеи, как мне справиться с этим?Мой пример Здесь
Код также здесь:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Roundabout</title>
<script src="js/jquery-1.5.min.js" /></script>
<script src="js/jquery.roundabout.min.js" /></script>
<script src="js/jquery.roundabout-shapes.min.js" /></script>
<style>
body { font-family: Verdana, Geneva, sans-serif; }
p { font-size: 11px; }
.roundabout-holder { padding: 0; height: 5em; }
.roundabout-moveable-item {
height: 4em;
width: 4em;
cursor: pointer;
}
.roundabout-moveable-item h1 {
font-size: 11px;
}
.body { width: auto !important; }
.roundabout-in-focus { cursor: auto; }
</style>
</head>
<body>
<div id="container">
<div id="myRoundabout">
<div class="box">
<h1>Contact events4fun</h1>
<p>HTML Element In Here</p>
<p>email : test@test.com</p>
</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
</div>
<script>
$(document).ready(function() {
$('#myRoundabout').roundabout({
shape: 'diagonalRingLeft',
childSelector: 'div.box',
minScale: 0.1,
maxScale: 1.2
});
});
</script>
</div>
</body>
</html>
Заранее спасибо