图片立体旋转特效在chrome 火狐 下失效，求解！是js的问题，不规范？求高手帮改。代码最下面有我的标注。


<!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">
<style type="text/css">
.img-area{width:960px;height:400px;margin:0 auto}
.point{position:relative}
.point img{position:absolute;height:350px;border:1px silver solid;left:0;top:0;}
</style>
<script>
var w=350; //图片宽度
var h=350; //图片高度
var pn=5; //图片数量
var r=400; //圆圈半径
var x=400; //圆心绝对位置x
var y=100; //圆心绝对位置y
var dv=0.005; //旋转速度
var rh=80; //垂直距离
var pi=3.1415926575,d=pi/2,pd=Math.asin(w/2/r),ed=pi*2/pn,smove=true
window.onload=function(){
   var o=document.getElementById("imground");
   var arrimg=o.getElementsByTagName("img");
   for (n=0;n<arrimg.length;n++){
    arrimg[n].onmouseout=function(){smove=true;}
    arrimg[n].onmouseover=function(){smove=false;}
    arrimg[n].onmousedown=function(){dv=-dv}
   }
   setInterval(roundMove,20);
}
function roundMove(){
   for (n=1;n<=pn;n++){
    var o=document.getElementById("p"+n)
    var ta=Math.sin(d+ed*n),strFilter;
    if (ta<0) o.style.left=Math.cos(d+ed*n-pd)*r+x;
    else o.style.left=Math.cos(d+ed*n+pd)*r+x;
    o.style.top=ta*rh+rh+y;
    o.style.width=Math.abs(Math.cos(d+ed*n+pd)-Math.cos(d+ed*n-pd))*r;
    if (ta<0) {ta=(ta+1)*80+20;o.style.zIndex=0;}
    else {ta=100;o.style.zIndex=1}
    if (o.style.zIndex<=0) strFilter="FlipH(enabled:true)"
    else strFilter="FlipH(enabled:false)";
    strFilter=strFilter+" alpha(opacity="+ta+")";
    o.style.opacity=ta/100;
    o.style.filter=strFilter;
   }
   if (smove) d=d+dv;
}
</script>
<div class="img-area">
        <div id="imground" class="point">
                <a href="#one"><img id="p1" src="http://static.blueidea.com/static/image/common/logo.gif"/></a>
                <a href="#two"><img id="p2" src="http://static.blueidea.com/static/image/common/logo.gif"/></a>
                <a href="#three"><img id="p3" src="http://static.blueidea.com/static/image/common/logo.gif"/></a>
                <a href="#four"><img id="p4" src="http://static.blueidea.com/static/image/common/logo.gif"/></a>
                <a href="#five"><img id="p5" src="http://static.blueidea.com/static/image/common/logo.gif"/></a>
        </div>
</div>
<div id="one" style="margin-top:500px;background:#ff0000;height:200px;">1</div>
<div id="two" style="margin-top:500px;background:#ff0000;height:200px;">2</div>
<div id="three" style="margin-top:500px;background:#ff0000;height:200px;">3</div>
<div id="four" style="margin-top:500px;background:#ff0000;height:200px;">4</div>
<div id="five" style="margin-top:500px;background:#ff0000;height:200px;">5</div>
</body>
</html>去掉 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
头部这两行就没问题，奇怪。

解决方案 »

  1.   

    标准的值是要有px单位的。o.style.left = xxx+"px";就可以了，o.style.top也一样如此
      

  2.   

    我是这样做的，先定义一个函数来判断客户端浏览器类型，如果是火狐或chrome等显示出错的浏览器中就不显示
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">如果是ie或360或搜狗之类的就显示。定义函数如下：function browser(info) 
    info=request.servervariables("http_user_agent")
    if instr(info,"Firefox")>0 then 
    response.write ""
    elseif instr(info,"Chrome")>0 then 
    response.write ""
    else 
    response.write "<!DOCTYPE html PUBLIC ""-//W3C//DTD XHTML 1.0 Transitional//EN"" ""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"">" & vbCrLf
    response.write "<html xmlns=""http://www.w3.org/1999/xhtml"">"
    end if 
    end function 
    在代码中将：
    <!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">替换为函数的调用 ：<% call browser(info)%>
    这样问题就解决了。