js实现按钮控制图片360度翻转特效的方法

  本文实例讲述了js实现按钮控制图片360度翻转特效的方法。分享给大家供大家参考。具体实现方法如下:

  

复制代码 代码如下:
<html>

  <title>js实现按钮控制图片360度翻转特效</title>

  <body>

  <script language="javascript">

  var isIE = (document.uniqueID)?1:0;

  var i=1;

  function rotate(image)

  {

  var object = image.parentNode;

  if(isIE){

  image.style.filter="progid:dXImagetransform.Microsoft.basicImage(rotation="+i+")";

  i++;

  if(i>4) {i=1};

  }

  else{

  try{

  var canvas = document.createElement('canvas');

  if(canvas.getContext("2d")) {

  object.replaceChild(canvas,image);

  var context = canvas.getContext("2d");

  context.translate(176, 0);

  context.rotate(Math.PI*0.5);

  context.drawImage(image,0,0);

  }

  }catch(e){}

  }

  }

  </script>

  <input type="button" value="点击旋转图片" onclick="rotate(document.getElementById('myimg'))" /><br />

  <img id="myimg" src="/images/m03.jpg"/>

  </body>

  </html>

  希望本文所述对大家的javascript程序设计有所帮助。