Question

我想在我的网站中旋转我的徽标，所以我正在使用旋转插件，它正在工作。但是当图像旋转时，图像下方的内容会上下移动。

请建议我如何纠正它。

请在此处查看我的页面：http://www.netelity.com/rotate

这是我的完整代码：

<!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>
<link href="style.css" rel="stylesheet" type="text/css" />

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="../../../Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript" src="jquery.rotate.1-1.js"></script>
<script type="text/javascript">
//<![CDATA[
    var angle = 8;

    $(document).ready(function() {
        setInterval(function() {
                $("#pic").rotate(angle);
                /* angle += 1; Increases the rotating speed */
        }, 100);
    });
//]]>
</script>

</head>

<body>
<table width="1000" border="0" cellspacing="0" cellpadding="0" align="center" class="main_tab" height="636">
  <tr>
    <td height="58" valign="top"><table width="800" border="0" cellspacing="1" cellpadding="0" align="center" class="table">
  <tr>
    <td height="56">&nbsp;</td>
  </tr>
</table>
</td>
  </tr>
  <tr>
    <td height="21" valign="top" class="bg_menu"><table width="800" border="0" cellspacing="1" cellpadding="0" align="center">
  <tr>
    <td width="32">&nbsp;</td>
    <td width="171" class="menu">MNIH Events & Designs</td>
    <td width="101" class="menu">About Us</td>
    <td width="143" class="menu">Event Management</td>
    <td width="106" class="menu">Our Services</td>
    <td width="130" class="menu">Themed Events</td>
    <td width="92" class="menu">Contact Us</td>
    <td width="16">&nbsp;</td>
  </tr>
</table>
</td>
  </tr>
  <tr>
    <td valign="top"><table width="100%" border="0" cellspacing="1" cellpadding="0" class="image1">
      <tr>
        <td width="35%"><table width="100%" border="0" cellspacing="1" cellpadding="0">
          <tr>
            <td width="14%">&nbsp;</td>
            <td width="22%"><img src="images/logo1.png" width="140" height="154" name="pic" id="pic" /></td>
            <td width="64%">&nbsp;</td>
          </tr>
        </table></td>
        </tr>
    </table></td>
  </tr>
  <tr>
    <td valign="top" class="bg_menu"><table width="100%" border="0" cellspacing="1" cellpadding="0">
      <tr>
        <td width="33%">&nbsp;</td>
        <td width="42%">&nbsp;</td>
        <td width="25%" class="menu">LMIH Events &amp; Designs</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td valign="top"><table width="800" border="0" align="center" cellpadding="0" cellspacing="1" class="table" height="300">
      <tr>
        <td><object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="300">
          <param name="movie" value="text_site.swf" />
          <param name="quality" value="high" />
          <param name="wmode" value="opaque" />
          <param name="swfversion" value="8.0.35.0" />
          <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
          <param name="expressinstall" value="../../../Scripts/expressInstall.swf" />
          <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
          <!--[if !IE]>-->
          <object type="application/x-shockwave-flash" data="text_site.swf" width="800" height="300">
            <!--<![endif]-->
            <param name="quality" value="high" />
            <param name="wmode" value="opaque" />
            <param name="swfversion" value="8.0.35.0" />
            <param name="expressinstall" value="../../../Scripts/expressInstall.swf" />
            <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
            <div>
              <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
              <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
            </div>
            <!--[if !IE]>-->
          </object>
          <!--<![endif]-->
        </object></td>
        </tr>
    </table></td>
  </tr>
  <tr>
    <td valign="top" class="bg_menu"><table width="800" border="0" align="right" cellpadding="0" cellspacing="1">
      <tr>
        <td width="6">&nbsp;</td>
        <td width="144" class="menu">LMIH Events & Designs</td>
        <td width="71" class="menu"><b class="g"> | </b>About Us</td>
        <td width="131" class="menu"><b class="g"> | </b>Event Management</td>
        <td width="92" class="menu"><b class="g"> | </b>Our Services</td>
        <td width="106" class="menu"><b class="g"> | </b>Themed Events</td>
        <td width="115" class="menu"><b class="g"> | </b>Contact Us</td>
        <td width="126">&nbsp;</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><br />
    <br /></td>
  </tr>
</table>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>

Answer 1

就个人而言，我会制作一个div并给它一个设定的宽度和高度，并将图像放在其中，然后，由于样式的高度和宽度，容器div将无法调整大小......

Answer 2

你的图像是173像素×199像素，这意味着对角线是~264像素。包含的表格单元将增长和缩小以拥抱图像，这意味着它从173px开始，最高达到264px，然后回到173px。

您可以将容器的高度设置为264px以防止其下方的内容移动，或者您可以编辑插件以在图像旋转时缩小图像以使其保持相同的高度。当然，调整td的大小意味着您还需要重做背景图像..

<td width="35%" height="265px"><table width="100%" border="0" cellspacing="1" cellpadding="0">

Answer 3

在徽标容器tr中使用固定的height（大于徽标）（就像使用表格一样）。编辑的代码在

之下

<tr style="height: 500px;">
            <td width="14%">&nbsp;</td>
            <td width="22%"><canvas width="226" height="204" id="pic"></canvas></td>
            <td width="64%">&nbsp;</td>
</tr>

我已经使用Chrome开发者工具添加了上述高度，似乎没问题。

使用jQuery Rotate插件旋转图像时出现问题

3 个答案: