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

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

jquery html css

使用jQuery旋转插件旋转图像时出现问题,jquery,html,css,rotation,Jquery,Html,Css,Rotation,我想在我的网站上旋转我的标志，所以我使用了一个旋转插件，它的工作。但图像下方的内容随着图像的旋转而上下移动请建议我如何改正它请看我的页面：这是我的完整代码： <!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/x

我想在我的网站上旋转我的标志，所以我使用了一个旋转插件，它的工作。但图像下方的内容随着图像的旋转而上下移动

请建议我如何改正它

请看我的页面：

这是我的完整代码：

<!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>


无标题文件
//
MNIH活动与设计
关于我们
事件管理
我们的服务
主题活动
联系我们
LMIH活动及；设计
此页面上的内容需要更新版本的Adobe Flash Player。

LMIH活动与设计
|关于我们
|事件管理
|我们的服务
|主题活动
|联系我们

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

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

在徽标容器tr中使用固定的

高度（大于徽标）（如您使用表格）。编辑代码如下
<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 Developer's Tool添加了如上所述的高度，看起来还可以。
在徽标容器tr中使用固定的高度（大于徽标）（正如您使用表格一样）。编辑代码如下
<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 Developer's Tool添加了上面的高度，看起来还可以。
您的图像是173像素乘以199像素，这意味着对角线是~264像素。包含的表单元格将增长和收缩以拥抱图像，这意味着它从173px开始，上升到264px，然后返回到173px
您可以将容器的高度设置为264px以防止其下方的内容移动，也可以编辑插件以在图像旋转时收缩图像，使其保持相同的高度。当然，调整td
的大小意味着您也需要重做背景图像
<td width="35%" height="265px"><table width="100%" border="0" cellspacing="1" cellpadding="0">

您的图像是173px乘以199px，这意味着对角线是~264px。包含的表单元格将增长和收缩以拥抱图像，这意味着它从173px开始，上升到264px，然后返回到173px
您可以将容器的高度设置为264px以防止其下方的内容移动，也可以编辑插件以在图像旋转时收缩图像，使其保持相同的高度。当然，调整td
的大小意味着您也需要重做背景图像
<td width="35%" height="265px"><table width="100%" border="0" cellspacing="1" cellpadding="0">


正如下面的答案所建议的，修复方法很简单。将徽标放置在容器中，容器的指定尺寸足以容纳旋转。如下面的答案所示，修复非常简单。将徽标放置在容器中，容器的指定尺寸足以容纳旋转。我已经更改了高度，它正在工作，但如果我想保持height=“199px”，那么我应该在哪里更改？请告诉我。在插件中，我到底应该更改什么？如果你能接受它的外观，我会注释掉jquery.rotate.1-1中canvas.style.width=canvas.width=Math.abs（…和canvas.style.height=canvas.height=Math.abs）的行（…在开始时。否则，我认为打开另一个问题寻求帮助，了解如何正确缩放和旋转图像最好。这有点超出了我的回答范围。我已更改了高度，它正在工作，但如果我想保持height=“199px”那么我应该在哪里更改？请告诉我。在插件中，我到底应该更改什么？如果你能接受它的外观，我会注释掉jquery.rotate.1-1中canvas.style.width=canvas.width=Math.abs（…和canvas.style.height=canvas.height=Math.abs）的行（…在开始时。否则，我认为打开另一个问题寻求如何正确缩放和旋转图像的帮助是最好的。这有点超出了我能回答的范围。我应该在其中插入图像。保持代码不变，只需将包含的
替换为
。如果我这样做，我也有同样的问题em:（.我只希望我的标题应该是199px，为此我需要做的事情请建议我：（我已经检查过当徽标旋转时，高度增加到263 px，因此您必须提供至少263 px的高度，或者您必须减小徽标大小，使其从我应该插入图像的两个角落保持在199px范围内。保持代码不变，只需将包含的
替换为
，如果我这样做，我会遇到相同的问题：（.我只想我的标题应该是199px，为此我需要做的事请建议我：（我已经检查过当徽标旋转时高度增加到263px，所以你必须提供至少263px的高度，或者你必须减小徽标大小，使其从两个角保持在199px范围内。）