男丁格爾's 脫殼玩

沒錯!只要 1,200 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

Wilq32.RotateImage 0.6

原本在一般的網頁中要讓圖片元素能旋轉不是一件簡單的事情，不過 Wilq32.RotateImage 已經幫我們把基本的旋轉功能寫成套件了，我們只要引用並指定圖片元素跟角度就能輕輕鬆鬆讓圖片轉來轉去囉！

套件名稱：Wilq32.RotateImage
套件版本：1.7
作者網站：http://wilq32.adobeair.pl/jQueryRotate/Wilq32.jQueryRotate.html
套件網址：N/A
發佈日期：2010-12-16
檔案大小：13.2 KB
檔案下載：jQueryRotate.js

參數說明：

檢視原始碼 JavaScript

angleValue(必填)
描述： 要旋轉的角度
預設值： 0
 
parameters(選填)
描述： 進階的自訂選項; 允許的屬性有 angle, animateAngle, maxAngle, minAngle, callback, bind
預設值：無
 
angle(選填)
描述： 要旋轉的角度
預設值： 0
 
animateAngle(選填)
描述： 使用動態的方式轉到指定的角度(不過只有在 rotateAnimation() 中才有效)
預設值： 0
 
maxAngle(選填)
描述： 旋轉的最大角度值
預設值： 無
 
minAngle(選填)
描述： 旋轉的最小角度值
預設值： 無
 
callback(選填)
描述： 當旋轉完後要觸發的函式
預設值： function(){ };
 
bind(選填)
描述： 幫指定的圖片元素加上事件
預設值： 無

方法說明：

檢視原始碼 JavaScript

// 幫指定的圖片元素中轉到指定的角度
$(selector).rotate(angleValue);
 
// 幫指定的圖片元素中轉到指定的角度, 並設定其它進階的參數
$(selector).rotate(parameters);
 
// 幫指定的圖片元素中動態旋轉到指定的角度
$(selector).rotateAnimation(angleValue);
 
// 幫指定的圖片元素中動態旋轉到指定的角度, 並設定其它進階的參數
$(selector).rotateAnimation(parameters);

使用範例：

檢視原始碼 JavaScript

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jQueryRotate.js"></script>
<script type="text/javascript">
	$(function(){
		// 讓第一張圖片旋轉 210 度
		$("#img1").rotate(210);
 
		// 讓第一張圖片旋轉 210 度
		// 且當滑鼠移入及移出時分別轉到不同的角度
		var rot = $("#img2").rotate({
			angle: 210,
			bind: [
				{"mouseover": function(){rot[0].rotateAnimation(-85);}},
				{"mouseout": function(){rot[0].rotateAnimation(210);}}
			]
		});
	});
</script>
 
<body>
	<img id="img1" src="patapon_300.jpg" alt="Patapon 300" />
 
	<img id="img2" src="patapon_300.jpg" alt="Patapon 300" />
</body>

範例 1

檔案描述
基本的範例檔案(免空)	開始下載
基本的範例檔案	會員限定

也許您對這些文章也有興趣

4 筆針對 [jQ]Wilq32.RotateImage 1.7 的迴響

Fede 於 2010-02-07 09:15:07 說：

大大好：

不錯的例子，我現在正在想如何用滑鼠選擇角度加以改變…

nice work...

回覆 ↓
- 男丁格爾於 2010-02-07 12:25:15 說：
  
  若有任何新的發現或是心得...記得要分享喔:D
  
  回覆 ↓
Wilq32 於 2010-04-16 21:54:13 說：

Actual version of jQueryRotate is 1.1, that fixes most of the problem.

Please also update your links as GooglePage migrates and breaks my old page.

Thank you!

回覆 ↓
- 男丁格爾於 2010-04-16 22:13:07 說：
  
  Thank you for your notice!!
  
  回覆 ↓

也許您對這些文章也有興趣

4 筆針對 [jQ]Wilq32.RotateImage 1.7 的迴響

發表迴響 取消回覆

發表迴響取消回覆