很強大,jQuery也很強大,兩者結合在一起就是無比強大.

    這里要介紹的這個單擊文字或圖片內容放大居中顯示的效果就是這兩者結合的產物.

    先來介紹css和jQuery各自發揮了什么作用吧:

    css:自適應圓角投影效果

    好吧,我承認我寫這個圓角投影自適應效果花了好幾個小時,加上將自己的自適應代碼寫入JavaScript中,完成demo實例頁面,我是用了差不多整整一個晚上的時間.但是最終實現的效果還是令人欣慰,感覺值得的.您可以從下面這張圖看出點最終放大后顯示的效果:

    圖片內容后圓角投影效果圖

    jQuery:放大顯示效果

    當您單擊觸發了內容放大事件后,內容就會由你單擊的地方逐漸放大,同時透明度不斷升至100%,位置也由單擊處移動到瀏覽器中央,很酷的效果.

    建議您狠狠地單擊這里:demo效果演示頁面去體驗下這種效果(附打包下載

    此插件可以幾乎可以放大任意的東西,文字,圖片,flash,視頻,復雜的div等都沒有問題.在放大圖片的效果上尤為出眾.

    這里簡要說一下使用的方法:

    如果您下載的實例包,解壓后查看頁面源代碼,會發現

    $('div.small_pic a').fancyZoom({scaleImg: true, closeOnClick: true}); ①

    $('#zoom_word_1').fancyZoom({width:400, height:200}); ②

    $('#zoom_word_2').fancyZoom(); ③

    $('#zoom_flash').fancyZoom(); ④

    的調用函數.

    其表示的含義分別是:

    ① class為small_pic的div標簽下面的a標簽的href指向的層放大.例如:所表示的就是單擊這個"some.jpg"圖片后,href指向的這個id為"#pic_one"的層放大顯示.這就導致了

    這個div放大顯示了.

    ② id為zoom_word_1的a標簽的href指向的層放大消失,本實例中,此href為"#zoom_word_one",于是頁面上默認隱藏的"

    "層就放大顯示了.

    ③ ④ 原理與這個類似,關鍵一點就是a標簽的href指向.href指那個,那個層在單擊后就會放大.而這個放大的層你隨便寫,隨便放東西都沒有問題的,與JavaScript脫離,所以即使您不懂JavaScript,也不用擔心出錯.

    最后補充一下,IE6下沒有圓角投影效果,因為這個IE6不支持png透明,考慮代碼成本,所以IE6下用邊框代替了投影,但是效果依舊很酷的