关于要怎么点击一张图片实现有反转效果，点击正面反转成另一张图片，用javascript 和css应

html-css018

关于要怎么点击一张图片实现有反转效果，点击正面反转成另一张图片，用javascript 和css应,第1张

<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>

最近在做移动端开发的时候，有时候会遇到设置的背景图被莫名其妙的旋转了90°，这是为什么呢？

原因是这个图片携带了exif信息，去掉这个信息就可以了，图片也就恢复正常显示了，在src的路径后面加上参数imageMogr2/auto-orient即可；例如：<img src="123.png?imageMogr2/auto-orient"/>