网页中图片旋转的几种实现方式

最新推荐文章于 2021-12-25 21:04:14 发布

孤城幻夜

最新推荐文章于 2021-12-25 21:04:14 发布

阅读量6.6k

点赞数 1

分类专栏： javascript

javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

原文章地址：http://biancheng.dnbcw.info/javascript/427943.html

网页中图片旋转一般有下面三种常见的实现方式：

一、 ie 滤镜

IE的图形旋转滤镜，通过指定BasicImage滤镜的rotation值旋转元素，旋转方向为顺时针，旋转的中心点为元素的左上角。rotation可以有4个旋转值：0, 1, 2,和3分别表示将元素旋转0度、90度、180度、270度。

浏览器支持： IE5.5+

CSS代码：

.rotate{ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }

JS代码：

element.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";

IE滤镜旋转演示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ie-filter-rotate</title>
</head>
<body>
<div  id="odiv" style="position:absolute; left:270px; top:45px;" >
<a href="http://s.click.taobao.com/t_8?e=7HZ6jHSTbIWYKA1Nkch%2BmIw66j0vo3r3FmWt1QTQz2JsyA%3D%3D&p=mm_10844584_0_0"><img style="border:none" src='http://img1.gtimg.com/digi/pics/hv1/72/143/1111/72279312.jpg' /></a>
</div>
<p style="line-height:1.5em">
	<button οnclick="rotate()"> rotate</button> <button οnclick="odiv.style.filter=''">clear filter</button>
    <a href="http://s.click.taobao.com/t_8?e=7HZ6jHSTbIWYKA1Nkch%2BmIw66j0vo3r3FmWt1QTQz2JsyA%3D%3D&p=mm_10844584_0_0">三星 galaxy note 10.1</a> <br />
	<span id="info">rotation=0，旋转0度</span>
</p>
<br/>
<script>

var i=0;
function rotate(){
	
	var oDiv = document.getElementById("odiv");
	if( !document.body.filters ){
		alert("这个浏览器不支持滤镜");
		return;
	}
	i>=3 ? i=0 : i++;
	oDiv.style.filter='progid:DXImageTransform.Microsoft.BasicImage(rotation='+ (i) +')';
 	document.getElementById("info").innerHTML= "rotation="+ i + "，旋转"+ (i*90) + "度"
}

</script>
</body>
</html>

二、 CSS3 transform

css3 的transform属性允许我们旋转、缩放和移动元素。可以通过给它传递一个 rotate(度数) 值来旋转一个元素，正值表示顺时针方向旋转，负值表示逆时针方向旋转，旋转的中心点为元素的中心。

浏览器支持：Firefox 4+、Oprea 10+、Safari 3.1+、Chrome 8+、IE 9+

CSS代码：

.rotate{
	-ms-transform:rotate(90deg); /* IE 9 */
	-moz-transform:rotate(90deg); /* Firefox */
	-webkit-transform:rotate(90deg); /* Safari and Chrome */
	-o-transform:rotate(90deg); /* Opera */
}

JS代码：

element.style.webkitTransform="rotate(-90deg)"
element.style.MozTransform="rotate(-90deg)"
element.style.msTransform="rotate(-90deg)"
element.style.OTransform="rotate(-90deg)"
element.style.transform="rotate(-90deg)";

css3 tranform rotate 旋转演示：

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>css 3 transform rotate</title>
<style>
a img{ border:none}
</style>
</head>

<body>
<div id="rotate" style=" cursor:pointer; position:absolute; left:100px; top:100px">
<a href="http://www.amazon.cn/gp/product/B006GYJ5LY/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=536&creative=3200&creativeASIN=B006GYJ5LY&linkCode=as2&tag=buyed-23"><img src="http://ec4.images-amazon.com/images/I/410Ve1e79CL._SL500_AA300_.jpg" /></a><img src="http://www.assoc-amazon.cn/e/ir?t=buyed-23&l=as2&o=28&a=B006GYJ5LY" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />

</div>
<script>
(function(){
var element = document.getElementById("rotate");
var r = 0;
var i = 1;
function rotate(){
	r += i;
	if( Math.abs(r) >= 25 ) i*=-1
	element.style.MozTransform = "rotate(" + r + "deg)";
	element.style.webkitTransform ="rotate(" + r + "deg)";
	element.style.msTransform = "rotate(" + r + "deg)";
	element.style.OTransform = "rotate(" + r + "deg)";
	element.style.transform = "rotate(" + r + "deg)";
}

var timer = setInterval(rotate,50);

element.onmouseover = function(){
	clearInterval(timer);
	timer = null;
};

element.onmouseout = function(){
	if(timer)return;
	timer = setInterval(rotate,30);
};
}());
</script>
</body>
</html>

三、 HTML5 canvas rotate

使用canvas 2d绘图上下文对象的context.rotate(angle)方法，通过指定需要旋转的弧度旋转坐标轴来实现图片的旋转，正值表示顺时针方向旋转，负值表示逆时针方向旋转，旋转的中心点时画布的左上角。角度转换弧度的公式为：弧度 = 角度 * Math.PI / 180。

浏览器支持：Chrome 1.0+、Firefox 1.5+、Opera 9.0+、Safari 1.3+ 、IE 9+

JS代码：

context = canvas.getContext("2d")
context.rotate(90 * Math.PI / 180);
context.drawImage(img, 0, -img.height);

坐标旋转示意图：

HTML5 canvas rotate旋转演示：

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>HTML5 canvas rotate</title>
</head>


<body>
<a href="http://www.amazon.cn/gp/product/B009DFCZAQ/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=536&creative=3200&creativeASIN=B009DFCZAQ&linkCode=as2&tag=buyed-23">HTML5秘籍/图灵程序设计丛书</a><img src="http://www.assoc-amazon.cn/e/ir?t=buyed-23&l=as2&o=28&a=B009DFCZAQ" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /><br>


<script>
(function(){
	var canvas = document.createElement("canvas");
	canvas.style = "border:1px solid #ccc"
	var context = canvas.getContext("2d");
	var img = new Image();


	if(context == null){
		return;
	}
	img.src="http://img1.douban.com/lpic/s11190661.jpg";




	
	img.onload = function(){
		var length =  Math.sqrt(Math.pow(this.width, 2) + Math.pow(this.height, 2));//计算画布大小，取图形的对角线，否则旋转时可能隐藏掉部分内容
		canvas.width = length;
		canvas.height = length;
		//context.strokeRect(0, 0, length, length);
		context.translate(canvas.width/2, canvas.height/2);//平移坐标原点到画布中心
		//context.rotate(30 * Math.PI / 180);
		context.drawImage(this, (-this.width / 2), ( -this.height / 2 ));
		timer = setInterval(rotate, 50);
	}
	
	var r = 0;
	var i = 1;
 	function rotate(){
		r += i;
		if( Math.abs(r) >= 25 ) i*=-1;//左右摆动25度
		
		context.save();//保存坐标抽状态
		context.clearRect(-canvas.width/2,  -canvas.height/2, canvas.width, canvas.height);
		context.rotate(r * Math.PI / 180);
		context.drawImage(img, (-img.width / 2), ( -img.height / 2 )); //把图片填充到画布中心
		context.restore() //还原坐标抽状态
	};
	
	
	
	//绑定事件
	canvas.onmouseover = function(){
		clearInterval(timer);
		timer = null;
	};
	
	canvas.onclick = function(){
		location.href= "http://www.amazon.cn/gp/product/B009DFCZAQ/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=536&creative=3200&creativeASIN=B009DFCZAQ&linkCode=as2&tag=buyed-23";
	};
	
	canvas.onmouseout = function(){
		if(timer)return;
		timer = setInterval(rotate,50);
	};
	document.body.appendChild(canvas);
}());
</script>
</body>
</html>

孤城幻夜

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
网页中图片旋转的几种实现方式

网页中图片旋转一般有下面三种常见的实现方式：一、 ie 滤镜IE的图形旋转滤镜，通过指定BasicImage滤镜的rotation值旋转元素，旋转方向为顺时针，旋转的中心点为元素的左上角。rotation可以有4个旋转值：0, 1, 2,和3分别表示将元素旋转0度、90度、180度、270度。浏览器支持： IE5.5+CSS代码： .rotate{ fi
复制链接

扫一扫