這個效果怎麼做出來的?

6 Responses

1. fossette表示:

   2009 年 12 月 07 日16:30:53

   $(document).ready(
   function()
   {
   $(‘#dock2’).Fisheye(
   {
   maxWidth: 50,
   items: ‘a’,
   itemsText: ‘span’,
   container: ‘.dock-container2’,
   itemWidth: 40,
   proximity: 90,
   halign : ‘center’
   }
   )
   $(‘#dock’).Fisheye(
   {
   maxWidth: 60,
   items: ‘a’,
   itemsText: ‘span’,
   container: ‘.dock-container’,
   itemWidth: 40,
   proximity: 80,
   alignment : ‘left’,
   valign: ‘bottom’,
   halign : ‘center’
   }
   )
   }
   );

   登入以進行回覆
2. fossette表示:

   2009 年 12 月 07 日16:31:19

   關鍵字：魚眼= =，testing

   登入以進行回覆
3. fossette表示:

   2009 年 12 月 07 日16:45:26

   新竹教育大學資訊科學研究所部落格

   .dock img { behavior: url(http://blog.cs.nhcue.edu.tw/wpmu/wp-content/themes/itheme-1-1-dock/dock/iepngfix.htc) }

   <!–
   CS Home
   –>
   
   
   
   
   

   –>

   <!–
   Home
   –>
   CS Home
   Email
   Album
   Entries RSS
   Comments RSS

   $(document).ready(
   function()
   {
   $(‘#dock2’).Fisheye(
   {
   maxWidth: 50,
   items: ‘a’,
   itemsText: ‘span’,
   container: ‘.dock-container2’,
   itemWidth: 40,
   proximity: 90,
   halign : ‘center’
   }
   )
   $(‘#dock’).Fisheye(
   {
   maxWidth: 60,
   items: ‘a’,
   itemsText: ‘span’,
   container: ‘.dock-container’,
   itemWidth: 40,
   proximity: 80,
   alignment : ‘left’,
   valign: ‘bottom’,
   halign : ‘center’
   }
   )
   }
   );

   登入以進行回覆
4. fossette表示:

   2009 年 12 月 07 日16:47:52

   http://www.nhcue.edu.tw/~u9212023/fisheye.html

   存txt檔看原始碼

   登入以進行回覆
5. klou表示:

   2009 年 12 月 07 日23:37:13

   看來是引用了三個來自於 theme 的 css js 檔
   tks

   登入以進行回覆
6. SmileKevin表示:

   2009 年 12 月 12 日09:18:54

   是CSS+JavaScript
   請參考頁尾的code
   頁首部份是我自己修改過的
   把”說明文字”拿掉了(放大後會擋到blog的標題)

   這個code寫得厲害的地方在於
   連鏡像的模糊倒影都自己計算完
   不用自己作圖 : )

   登入以進行回覆