我想在我的网站上旋转我的 Logo ，所以我使用了一个旋转插件并且它可以正常工作。但图像下方的内容会随着图像的旋转而上下移动。
请建议我如何纠正它。
请在此处查看我的页面: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"> </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"> </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"> </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%"> </td>
<td width="22%"><img src="images/logo1.png" width="140" height="154" name="pic" id="pic" /></td>
<td width="64%"> </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%"> </td>
<td width="42%"> </td>
<td width="25%" class="menu">LMIH Events & 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"> </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"> </td>
</tr>
</table></td>
</tr>
<tr>
<td><br />
<br /></td>
</tr>
</table>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>
最佳答案
就我个人而言，我会制作一个 div 并为其设置宽度和高度，并将该图像放入其中，然后，由于样式化的高度和宽度，容器 div 将无法调整大小...
关于jquery - 使用 jQuery Rotate 插件旋转图像时出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7337101/