記得 Flash 剛推的時候，市面上一些教學的書都會有一對眼球跟隨滑鼠的範例。雖然網頁中要這樣轉動是比較麻煩一點，不過 jEye 作者也透過一些簡單的角度計來來做到同樣的效果。但該套件目前還沒很完善，建議不要去設定任何參數。
套件名稱：jEye
套件版本：0.0
作者網站：http://www.senamion.com/blog/jeye.html
套件網址：http://plugins.jquery.com/project/jEye
發佈日期：2009-09-17
檔案大小：2.27 KB
檔案下載：jquery.jEye.js
參數說明：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | xEye(選填) 描述： jEye 的 X 座標 預設值： 0 yEye(選填) 描述： jEye 的 Y 座標 預設值： 0 wEye(選填) 描述： 眼框的寬 預設值： 38 hEye(選填) 描述： 眼框的高 預設值： 38 wPupil(選填) 描述： 眼球的寬 預設值： 14 hPupil(選填) 描述： 眼球的高 預設值： 14 eyes(選填) 描述： 眼球數；最多只允許 2 顆 預設值： 2 |
方法說明：
檢視原始碼 JavaScript
1 2 | // 幫指定的元素加上 jEye 效果 $(selector).jEye(o); |
使用範例：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.jEye.js"></script> <style type="text/css"> body{ height: 500px; } #myBlock { position: absolute; top: 250px; left: 300px; width: 250px; height: 250px; border: 3px dashed green; } </style> <script type="text/javascript"> $(function(){ // 幫 body, #myBlock 加上 jEye 效果 $('body, #myBlock').jEye(); }); </script> <body> <div id="myBlock"></div> </body> |
眼框及眼球的圖片：
