关于要怎么点击一张图片实现有反转效果，点击正面反转成另一张图片，用javascript 和css应 20
关于要怎么点击一张图片实现有反转效果，点击正面反转成另一张图片，用javascript和css应该怎么写。你能写一个简单点的给我看下吗？...
关于要怎么点击一张图片实现有反转效果，点击正面反转成另一张图片，用javascript 和css应该怎么写。
你能写一个简单点的给我看下吗？ 展开
你能写一个简单点的给我看下吗？ 展开
2个回答
展开全部
<html>
<title>js实现按钮控制图片90度翻转特效</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(300, 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="1.jpg"/>
<!-- 图片路径你自己替换 -->
</body>
</html>
<title>js实现按钮控制图片90度翻转特效</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(300, 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="1.jpg"/>
<!-- 图片路径你自己替换 -->
</body>
</html>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
