我即将开始建立一个网站。设计采用后面的内容格式,然后点击它将其带到前面。在堆栈顺序中。设计是Here
基本概念是遵循jQuery Roundabout的想法。 Buuuuuuuuut我遇到的问题是当HTML被添加到每个框中时,当它移动到后面时它无法正确缩放。它保持相同的大小。理想情况下,我希望它可以扩展到匹配,但没有太多的外观。
有关如何管理此问题的任何想法?我的例子是Here
代码也在这里:
<!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>
提前致谢
答案 0 :(得分:1)
看起来字体大小是从包装器控制的。在您的示例中,<p>
和<h1>
的字体大小是使用px
设置的,因此不会调整大小。
尝试在css中完全删除这两行,或将其切换为em
或%
。
p { font-size: 11px; }
.roundabout-moveable-item h1 { font-size: 11px; }