当前位置: 代码迷 >> JavaScript >> 怎么用JS解决图片放大和旋转90的功能?且兼容Firefox呢
  详细解决方案

怎么用JS解决图片放大和旋转90的功能?且兼容Firefox呢

热度:78   发布时间:2012-06-15 19:37:05.0
如何用JS解决图片放大和旋转90的功能?且兼容Firefox呢?
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<META HTTP-EQUIV="imagetoolbar" CONTENT="no"> 
<style type="text/css"> 
</style> 
<SCRIPT language=JavaScript> 
var isIE = (document.uniqueID)?1:0;
var i=1;
function rotate()
{
var object = images1.parentNode; 
if(isIE){ 
images1.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> 
</head> 
<div><a href="#"><img src="./images/turn.gif" width="20" height="20" style="cursor:hand" onClick="rotate();" title="右转"></a></div> 
<div ><img src="http://f.imagehost.org/0607/Fruit_01_02_502_1024.jpg" id="images1"></div>
</body> 
</html>


上面这串代码只兼容ie 不兼容FF ..求解决办法啊

------解决方案--------------------
ff 可以用css3来写
参考下
http://dcoupe.diandian.com/post/2010-10-12/12382923

------解决方案--------------------
http://jsfiddle.net/ghostoy/ZKj9V/
参考
  相关解决方案