close

Overlay 特效是一個很常見的效果，各大網站也經常使用該方式顯示圖片，下列整理了一下

JQuery Tools 提供的 Overlay 功能。

UI 效果：(瀏覽器 Firefox 3.6 效果圖 )

2010-04-22_142439

在HTML中加入下方內容(圖片使用 JQuery Tools 提供圖片)

<div id="triggers">
    <img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" rel="#mies1"/>    
</div>
 
<div class="simple_overlay" id="mies1">
    <img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730.jpg" />
</div>

在HTML中加入下方 JavaScript


$(document).ready(function() {
    $("img[rel]").overlay();
});

 

CSS 相關設定請參閱範例檔

 

範例檔：JQuery_Tools_Overlay.RAR

參考網站：http://flowplayer.org/tools/index.html

arrow
arrow
    全站熱搜

    iammic 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄