哪位帮忙解释一下图片九十度旋转的代码啊，怎么让它可以逆时针旋转，下面是代码
<html><title>按钮控制图片360度翻转效果的JS代码丨芯晴网页特效丨CsrCode.Cn</title><body><scriptlanguage="java...
<html>
<title>按钮控制图片360度翻转效果的JS代码丨芯晴网页特效丨CsrCode.Cn</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){}
}
}
function rotate2(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.rotate2(Math.PI*0.5);
context.drawImage(image,0,0);
}
}catch(e){}
}
}
</script>
<input type="button" value="顺时针转" onClick="rotate(document.getElementById('myimg'))" />
<input type="button" value="逆时针转" onClick="rotate2(document.getElementById('myimg'))" /><br />
<img id="myimg" src="http://www.CsrCode.cn/images/m03.jpg"/>
</body>
</html> 展开
<title>按钮控制图片360度翻转效果的JS代码丨芯晴网页特效丨CsrCode.Cn</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){}
}
}
function rotate2(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.rotate2(Math.PI*0.5);
context.drawImage(image,0,0);
}
}catch(e){}
}
}
</script>
<input type="button" value="顺时针转" onClick="rotate(document.getElementById('myimg'))" />
<input type="button" value="逆时针转" onClick="rotate2(document.getElementById('myimg'))" /><br />
<img id="myimg" src="http://www.CsrCode.cn/images/m03.jpg"/>
</body>
</html> 展开
2个回答
展开全部
你的代码中的第二个按钮显然和第一个按钮一样都是顺时针旋转的，我修改了一下，代码如下：
<html>
<title>按钮控制图片360度翻转效果的JS代码丨芯晴网页特效丨CsrCode.Cn</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){}
}
}
function rotate2(image)
{
var object = image.parentNode;
if(isIE){
image.style.filter="progid:dXImagetransform.Microsoft.basicImage(rotation="+i+")";
i=i+3;
if(i>4) {i=i-4};
}
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.rotate2(Math.PI*0.5);
context.drawImage(image,0,0);
}
}catch(e){}
}
}
</script>
<input type="button" value="顺时针转" onClick="rotate(document.getElementById('myimg'))" />
<input type="button" value="逆时针转" onClick="rotate2(document.getElementById('myimg'))" /><br />
<img id="myimg" src="http://www.CsrCode.cn/images/m03.jpg"/>
</body>
</html>
//关键就是这几句：
//image.style.filter="progid:dXImagetransform.Microsoft.basicImage(rotation="+i+")";
//i=i+3;
// if(i>4) {i=i-4};
//i为1 2 3 4时分别对应着图像的角度为90 180 270 360 ,所以你要让I每次加3，每次调整270°，也就是逆时针的90°了
<html>
<title>按钮控制图片360度翻转效果的JS代码丨芯晴网页特效丨CsrCode.Cn</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){}
}
}
function rotate2(image)
{
var object = image.parentNode;
if(isIE){
image.style.filter="progid:dXImagetransform.Microsoft.basicImage(rotation="+i+")";
i=i+3;
if(i>4) {i=i-4};
}
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.rotate2(Math.PI*0.5);
context.drawImage(image,0,0);
}
}catch(e){}
}
}
</script>
<input type="button" value="顺时针转" onClick="rotate(document.getElementById('myimg'))" />
<input type="button" value="逆时针转" onClick="rotate2(document.getElementById('myimg'))" /><br />
<img id="myimg" src="http://www.CsrCode.cn/images/m03.jpg"/>
</body>
</html>
//关键就是这几句：
//image.style.filter="progid:dXImagetransform.Microsoft.basicImage(rotation="+i+")";
//i=i+3;
// if(i>4) {i=i-4};
//i为1 2 3 4时分别对应着图像的角度为90 180 270 360 ,所以你要让I每次加3，每次调整270°，也就是逆时针的90°了
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
js。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
