很強(qiáng)大,jQuery也很強(qiáng)大,兩者結(jié)合在一起就是無比強(qiáng)大.

    這里要介紹的這個(gè)單擊文字或圖片內(nèi)容放大居中顯示的效果就是這兩者結(jié)合的產(chǎn)物.

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

    css:自適應(yīng)圓角投影效果

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

    圖片內(nèi)容后圓角投影效果圖

    jQuery:放大顯示效果

    當(dāng)您單擊觸發(fā)了內(nèi)容放大事件后,內(nèi)容就會(huì)由你單擊的地方逐漸放大,同時(shí)透明度不斷升至100%,位置也由單擊處移動(dòng)到瀏覽器中央,很酷的效果.

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

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

    這里簡(jiǎn)要說一下使用的方法:

    如果您下載的實(shí)例包,解壓后查看頁面源代碼,會(huì)發(fā)現(xiàn)

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

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

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

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

    的調(diào)用函數(shù).

    其表示的含義分別是:

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

    這個(gè)div放大顯示了.

    ② id為zoom_word_1的a標(biāo)簽的href指向的層放大消失,本實(shí)例中,此href為"#zoom_word_one",于是頁面上默認(rèn)隱藏的"

    "層就放大顯示了.

    ③ ④ 原理與這個(gè)類似,關(guān)鍵一點(diǎn)就是a標(biāo)簽的href指向.href指那個(gè),那個(gè)層在單擊后就會(huì)放大.而這個(gè)放大的層你隨便寫,隨便放東西都沒有問題的,與JavaScript脫離,所以即使您不懂JavaScript,也不用擔(dān)心出錯(cuò).

    最后補(bǔ)充一下,IE6下沒有圓角投影效果,因?yàn)檫@個(gè)IE6不支持png透明,考慮代碼成本,所以IE6下用邊框代替了投影,但是效果依舊很酷的