JS實(shí)現(xiàn)圖片旋轉(zhuǎn)三種方法

ID：37852935

大?。?9.00 KB

頁數(shù)：9頁

時間：2019-06-01

資源描述：

《JS實(shí)現(xiàn)圖片旋轉(zhuǎn)三種方法》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、1使用jQueryRotate.js實(shí)現(xiàn)示例代碼：復(fù)制代碼代碼如下:#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);});測試結(jié)果：chrome下效果正常，旋轉(zhuǎn)后img對象仍為img對象；ie8下效果正常，但旋轉(zhuǎn)后img對象變?yōu)橄旅鎸ο?，由于對象變化，若旋轉(zhuǎn)后仍按原來方法獲取img對象，則會報js錯誤。欲獲取

4、image對象，可根據(jù)class獲取。如果圖像旋轉(zhuǎn)后，不進(jìn)行其它操作，則可用此方法。若進(jìn)行其它操作，如放大、縮小圖像，則此方法實(shí)現(xiàn)較復(fù)雜。復(fù)制代碼代碼如下:2使用Microsoft提供的Matrix對象示例代碼：復(fù)制代碼代碼如下:

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實(shí)現(xiàn)圖片旋轉(zhuǎn)三種方法

JS實(shí)現(xiàn)圖片旋轉(zhuǎn)三種方法

相關(guān)文章

相關(guān)標(biāo)簽