javascript 旋转图片代码

http://download.csdn.net/source/1241154
已经将IE和FireFox下的整合了，IE使用滤镜旋转 ，firefox使用CANVAS旋转

解决方案 »

  1.   

    <html>
    <head>
    <title>
    js图片旋转特效-wearelearn.net我们学习网
    </title>
    <style type="text/css">
    body{background:black}
    #p1{position:absolute;height:75px;top:200px;}
    </style>
    <script type="text/javascript">
    var left=200;
    var img=document.getElementById('p1');
    var imgWidth=286;
    var pi=Math.PI;
    var x=0,temp=0;
    function init(){
    document.getElementById('p1').style.left=left+'px';
    var set=setInterval('goOn()',40);
    }
    function goOn(){
    temp=Math.cos(x);
    document.getElementById('p1').style.width=Math.abs(imgWidth*temp)+'px';
    document.getElementById('p1').style.left=(left+(imgWidth-Math.abs(imgWidth*temp/2)))+'px';
    if(temp<0){
    document.getElementById('p1').style.filter='FlipH(enabled:true)';
    }else{
    document.getElementById('p1').style.filter='FlipH(enabled:false)';
    }
    x+=pi/90;
    }
    </script>
    </head>
    <body >
    <div id="imground">
    <img id="p1" src="http://www.wearelearn.net/image/a2.jpg" alt="js特效-我们学习网"/>
    </div>
    <script type="text/javascript">init();</script>
    </body>
    </html>