logo标签列表

使用jQuery动画在Internet Explorer 8上出现问题

javascriptjqueryhtmlanimation
4
今晚我努力学习HTML位置和jQuery动画，做了一个如下的HTML页面：

此晚我非常努力地尝试理解HTML位置和jQuery动画，制作了以下HTML页面：

<html>
<head>

<script src="jquery-1.5.1.min.js" type="text/javascript"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
    background-image: url(Cartoon_Landscape2.jpg);
}

</style>


<script type="text/javascript">
function moveDIV ( obj, x, y ) {
var element = document.getElementById(obj);
element.style.left=x;
element.style.top=y;
}

var t;

function anim1()
{
moveDIV("mariposa", screen.availWidth, screen.availHeight);
$("#mariposa").animate({left: '-84', top: '-58'}, 10000);

t=setTimeout("anim1()",22000);

//moveDIV("mariposa2", '-84', screen.availHeight);
//$("#mariposa2").animate({left: screen.availWidth, top: '-58'}, 10000);
}

function anim2()
{
moveDIV("mariposa2", '-84', screen.availHeight);
$("#mariposa2").animate({left: screen.availWidth, top: '-58'}, 10000);

t=setTimeout("anim2()",22000);

}

function callfunctions()
{
moveDIV("mariposa2", '-84', screen.availHeight);
anim1();
var b=setTimeout("anim2()",11000);
}
</script> 



</head>
<body  onLoad="javascript:callfunctions();"     >



<div id="mariposa" style="position:fixed; overflow: hidden;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,0,0" name="mariposa" width="84" height="58" align="top">
<param name=movie value="mariposa.swf">
<param name=wmode value=transparent>
<param name=quality value=high>
<embed src="mariposa.swf" width="84" type="application/x-shockwave-flash" height="58" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" wmode="transparent" align="top" name="mariposa">
</embed>
</object>
</div>

<div id="mariposa2" style="position:fixed; overflow: hidden;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,0,0" name="mariposa2" width="-84" height="58" align="top">
<param name=movie value="mariposa2.swf">
<param name=wmode value=transparent>
<param name=quality value=high>
<embed src="mariposa2.swf" width="84" type="application/x-shockwave-flash" height="58" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" wmode="transparent" align="top" name="mariposa2">
</embed>
</object>
</div>

</body>
</html>

所以该页面显示一个从屏幕左侧和右侧对角运动的Flash动画。这很适合我，并且在Firefox，Opera，Safari，Chrome上运行良好，但在Internet Explorer 8上不行！我该怎么办才能解决这个问题呢？ =(
附言：如果我在两个DIV中都使用绝对定位，动画将在Internet Explorer上工作，但会产生不必要的滚动条。
谢谢
1个回答
7

我看到你的示例代码中存在几个可能导致问题的问题：

1. JavaScript

首先，你几乎没有使用任何jQuery。既然你已经在使用jQuery，那么你最好充分利用它，避免很多麻烦。例如，你可以使用以下代码而不是实现自己的moveDIV()函数：

$("#id").css({left: 10, top: 10});

您可以几乎完全按照在代码中使用 .animate() 的方式来使用它。根据您的需要，也可以使用 offset()：

$("#id").offset({left: 10, top: 10});

在jQuery API文档中阅读关于.offset(), .css(), 和 .animate()的内容。

顺便说一下，不要使用：

setTimeout("anim1()",22000);

最好使用：

setTimeout(anim1, 22000);

它做的事情相同，但更有效率。

2. CSS

您可以尝试在具有position: fixed的位置上实验position: absolute或position: relative。

3. HTML

您没有文档类型，IE可能会尝试以怪异模式渲染您的页面。要使用标准模式，请在HTML开头添加文档类型：<!doctype html>

实际上，如果IE认为这对您的网站更好，甚至可能使用IE7渲染引擎来使用IE8。如果您想确保始终在IE中使用最佳渲染引擎，还应添加：<meta http-equiv="X-UA-Compatible" content="IE=Edge">

此外，当您确保您的网站在IE8上运行时，还可以使其使用Google Chrome Frame插件（如果可用）：<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1">

总之，您的HTML开头应该看起来像这样：

<!doctype html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >
  ... and the rest of your HTML

这些只是我在您的代码中看到的一些主要问题，您可能需要考虑更改。我不知道是否能解决您的问题，但即使不能，它也可以让您摆脱以后处理其他问题的困扰。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接