Question

我即将开始建立一个网站。设计采用后面的内容格式，然后点击它将其带到前面。在堆栈顺序中。设计是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>

提前致谢

Answer 1

看起来字体大小是从包装器控制的。在您的示例中，<p>和<h1>的字体大小是使用px设置的，因此不会调整大小。

尝试在css中完全删除这两行，或将其切换为em或%。

p { font-size: 11px; }
.roundabout-moveable-item h1 { font-size: 11px; }

帮助jQuery Roundabout库

1 个答案: