怎么用JS解决图片放大和旋转90的功能？且兼容Firefox呢
日期：2014-05-16 浏览次数：20465 次
如何用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/
参考
<!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/
参考
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
