CSS+JS实现图片无缩放旋转

最新推荐文章于 2023-05-06 18:39:03 发布

孔子-说

最新推荐文章于 2023-05-06 18:39:03 发布

阅读量3k

点赞数 1

分类专栏： CSS技巧

本文链接：https://blog.csdn.net/carefree31441/article/details/18310003

版权

CSS技巧专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!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" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>CSS+JS实现图片旋转</title>
<style type="text/css">
.content {position:relative;text-align:center;}
.rotation {position:absolute;bottom:-50px;left:50%;margin-left:-45px;width:90px;height:22px;cursor:pointer;display:block;}
</style>
<script type="text/javascript">
<!--
var isIE = /*@cc_on!@*/!1;
function rotationPicture(img){
if (!img) return;
this._img = typeof img == 'string'?document.getElementById(img):img;
this.r = 1;
this.addBtn();
this.bind();
}
rotationPicture.prototype.addBtn = function(){
this._rRight = document.createElement('input');
this._rRight.setAttribute('id','rRight');
this._rRight.setAttribute('type','button');
this._rRight.setAttribute('value','旋轉');
this._rRight.className = 'rotation';
if (!isIE){
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
canvas.setAttribute('width',this._img.width);
canvas.setAttribute('height',this._img.height);
ctx.drawImage(this._img,0,0);
this._ghost = this._img;
this._img.parentNode.replaceChild(canvas,this._img);
this._img = canvas;
}
this._img.parentNode.insertBefore(this._rRight,this._img);
};
rotationPicture.prototype.bind = function(){
var _this = this;
if (window.attachEvent){
this._rRight.attachEvent('onclick',rotation);
}else{
this._rRight.addEventListener('click',rotation,false);
}

function rotation(){
if (_this.r > 3) _this.r = 0;
if(isIE){
_this._img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(Rotation=' + _this.r + ')';
}else{
var ctx = _this._img.getContext('2d');
switch (_this.r){
case 0:
_this._img.setAttribute('width',_this._ghost.width);
_this._img.setAttribute('height',_this._ghost.height);
ctx.drawImage(_this._ghost,0,0);
break;
case 1:
_this._img.setAttribute('width',_this._ghost.height);
_this._img.setAttribute('height',_this._ghost.width);
ctx.rotate(90*Math.PI/180);
ctx.drawImage(_this._ghost,0,-_this._ghost.height);
break;
case 2:
_this._img.setAttribute('width',_this._ghost.width);
_this._img.setAttribute('height',_this._ghost.height);
ctx.rotate(180*Math.PI/180);
ctx.drawImage(_this._ghost,-_this._ghost.width,-_this._ghost.height);
break;
case 3:
_this._img.setAttribute('width',_this._ghost.height);
_this._img.setAttribute('height',_this._ghost.width);
ctx.rotate(270*Math.PI/180);
ctx.drawImage(_this._ghost,-_this._ghost.width,0);
break;
}
}
_this.r++;
}
};

//打开调用函数
window.onload = function(){
var ir = new rotationPicture('pic_xz');
};
-->

</script>
</head>
<body>
<div id="container">
  <div class="content">
    <img src="http://www.chenfahui.cn/ziliao/images/custom_hex.png" id="pic_xz" alt="顺时针旋转图片" />
  </div>
</div>
</body>
</html>

孔子-说

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
CSS+JS实现图片无缩放旋转

CSS+JS实现图片旋转.content {position:relative;text-align:center;}.rotation {position:absolute;bottom:-50px;left:50%;margin-left:-45px;width:90px;height:22px;cursor:pointer;display:block;}<!--var isIE
复制链接

扫一扫