91麻豆精品在线观看_一级做性色a爰片久久毛片免费_zzijzzij亚洲日本少妇jizjiz_国产日产欧美欧韩在线_日本高清在线www3344

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

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

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

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

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

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

    jQuery:放大顯示效果

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

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

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

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

    如果您下載的實例包,解壓后查看頁面源代碼,會發(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指向的層放大.例如:所表示的就是單擊這個"some.jpg"圖片后,href指向的這個id為"#pic_one"的層放大顯示.這就導(dǎo)致了

    這個div放大顯示了.

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

    "層就放大顯示了.

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

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