JS实现图片旋转三种方法

ID：37852935

大小：29.00 KB

页数：9页

时间：2019-06-01

资源描述：

《JS实现图片旋转三种方法》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、1使用jQueryRotate.js实现示例代码：复制代码代码如下:#div1{width:800px;height:600px;background-color:#ff0;position:absolute;}.imgRotate{width:100px;height:80px;position:absolute;top:50%;left:50%;margin:-40px00-5

2、0px;}

3、avascript"src="jQueryRotate.js">varnum=0;$("#input2").click(function(){num++;$("#img1").rotate(90*num);});测试结果：chrome下效果正常，旋转后img对象仍为img对象；ie8下效果正常，但旋转后img对象变为下面对象，由于对象变化，若旋转后仍按原来方法获取img对象，则会报js错误。欲获取

4、image对象，可根据class获取。如果图像旋转后，不进行其它操作，则可用此方法。若进行其它操作，如放大、缩小图像，则此方法实现较复杂。复制代码代码如下:2使用Microsoft提供的Matrix对象示例代码：复制代码代码如下:

5、t/css">#div1{width:800px;height:600px;background-color:#ff0;position:absolute;}.imgRotate{width:100px;height:100px;position:absolute;top:50%;left:50%;margin:-50px00-50px;}#imgRotate{width:100px;height:100px;position:absolute;top:50%;left:50%;margin:-50px0

6、0-50px;}

7、t/javascript">functionrotate(id,angle,whence){varp=document.getElementById(id);//westoretheangleinsidetheimagetagforpersistenceif(!whence){p.angle=((p.angle==undefined?0:p.angle)+angle)%360;}else{p.angle=angle;}if(p.angle>=0){varrotation=Math.PI*p.angle/1

8、80;}else{varrotation=Math.PI*(360+p.angle)/180;}varcostheta=Math.cos(rotation);varsintheta=Math.sin(rotation);if(document.all&&!window.opera){varcanvas=document.createElement('img');canvas.src=p.src;canvas.height=p.

JS实现图片旋转三种方法

JS实现图片旋转三种方法

相关文章

相关标签