html中实现图片的旋转
html中实现图片的旋转
·
<script type="text/javascript">
function rotateRight(id){
alert(id);
var p = document.getElementById(id);
alert(p)
rotate(p);
}
function rotateLeft(id){
var p = document.getElementById(id);
rotate2(p);
}
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');
//判断画布的环境是否为2D环境
if(canvas.getContext("2d")) {
//替换当前img为画布对象
object.replaceChild(canvas,image);
//指定画布的绘图环境为2D环境
var context = canvas.getContext("2d");
//旋转画布的方法
context.translate(176, 0);
//旋转的量,用弧度表示。正值表示顺时针方向旋转,负值表示逆时针方向旋转。
context.rotate(Math.PI*0.5);
//绘制一幅图像 0,0 为要绘制的图像的左上角的位置
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>
以上为js代码
<img src="driverPhoto.dagl?method=getDriverPhotoZp&daid=${driverPhotoInfo.daid }" id="daidImg" style="padding:0px;margin:0px;"/>
以上为图片的显示标签 你只要得到图片的显示标签的id传入值即可
更多推荐
已为社区贡献3条内容
所有评论(0)