Javascript jquery动画和Internet explorer 8存在问题_Javascript_Jquery_Html_Animation

Javascript jquery动画和Internet explorer 8存在问题

javascript jquery html animation

Javascript jquery动画和Internet explorer 8存在问题,javascript,jquery,html,animation,Javascript,Jquery,Html,Animation,今天晚上，我非常努力地试图理解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="tex

今天晚上，我非常努力地试图理解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>


身体{
背景图片：url（Cartoon_Landscape2.jpg）；
}
函数moveDIV（对象、x、y）{
var元素=document.getElementById（obj）；
element.style.left=x；
element.style.top=y；
}
变量t；
函数anim1（）
{
moveDIV（“mariposa”，screen.availWidth，screen.availHeight）；
$（“#mariposa”）.animate（{左：'-84'，上：'-58'}，10000）；
t=设置超时（“anim1（）”，22000）；
//moveDIV（“mariposa2”，'-84'，屏幕可用高度）；
//$（“#mariposa2”）.animate（{left:screen.availWidth，top:'-58'}，10000）；
}
函数2（）
{
moveDIV（“mariposa2”，'-84'，屏幕可用高度）；
$（“#mariposa2”）.animate（{left:screen.availWidth，top:'-58'}，10000）；
t=设置超时（“anim2（）”，22000）；
}
函数callfunctions（）
{
moveDIV（“mariposa2”，'-84'，屏幕可用高度）；
anim1（）；
var b=setTimeout（“anim2（）”，11000）；
}

因此，页面显示了一个flash动画，从屏幕的左侧和右侧进行对角线运动

非常适合我，在firefox、opera、safari、chome上都很好用，但在InternetExplorer8上却不行！！，我能做些什么来解决这个问题=(

另外，如果我在两个div中都使用绝对位置，则动画可以在internet explorer上运行，但会创建不必要的滚动条

谢谢

我在示例代码中看到了一些可能导致各种问题的东西：

1.JavaScript 首先，您几乎不使用任何jQuery。既然您已经在使用jQuery，那么您不妨充分使用它，并为自己省去很多麻烦。例如，您可以使用以下方法代替实现自己的moveDIV（）函数：

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

几乎完全符合您在代码中使用.animate（）的方式。您也可以使用offset（）来实现这一点，具体取决于对您更有利的方面：

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

读到关于在公园里

顺便说一下，不要使用：

setTimeout("anim1()",22000);

最好使用：

setTimeout(anim1, 22000);

它做同样的事情，但效率更高

2.CSS 您可以尝试使用

position:absolute

或

position:relative

进行实验，其中

position:fixed

3.HTML 您没有doctype，IE可能会尝试以怪癖模式呈现页面。若要使用标准模式，请在HTML的最开始添加doctype:

事实上，如果IE8认为IE7渲染引擎对您的网站更有利，它甚至可能会使用IE7渲染引擎。如果您想确保您始终使用IE中最好的渲染引擎进行渲染，您还应该添加：

此外，当您确保您的网站在IE8上运行时，您还可以让它使用该插件（如果该插件可用）：

总之，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


…以及HTML的其余部分

<> p>这是我在代码中看到的主要的东西，你可以考虑改变。我不知道它是否解决了你的问题，但是即使它没有，它也可以免除你以后处理其他问题的麻烦。