[jQuery]圖片(相片)透明度Show幻燈片效果

這一個效果很像是flash做出來的，可以用在形象產品或圖片上，當滑鼠滑入圖片時會慢慢變清楚，而滑鼠移開後，又會自動淡出到原本的透明度，當點擊照片時，又利用ThickBox(Lightbox)來顯示大張的圖片。

用到的jQuery效果有hover(滑入function,滑出function)，fadeTo(速度,透明度[0-1])

樣式如下：

圖片一開始會被亂數速度變透明，如果不想要此效果，只要把速度調整一下，或是直接css設定透明度都可以。

按下圖片可以啟動遮照，然後大相片（照片）被顯示出來了。

CSS

#abgneBlock {
    width: 520px;
    height: 273px;
    overflow: hidden;
    }
    
    #abgneBlock ul.list {
        padding: 0;
        margin: 0;

        list-style: none;
        /*position: absolute;
        top:422px;
        float:left;*/

    }
    #abgneBlock ul.list li {
        float: left;
        display:inline;
        padding:5px 5px 5px 5px ;
        width:120px;
        height:81px;
    }    
    

HTML

<div id="abgneBlock"> 
    <ul class="list">
    <li><a href="1.jpg"><img src="1_s.jpg" border="0" /></a></li>
    <li><a href="2.jpg"><img src="2_s.jpg" border="0" /></a></li>
    <li><a href="3.jpg"><img src="3_s.jpg" border="0" /></a></li>
    <li><a href="4.jpg"><img src="4_s.jpg" border="0" /></a></li>
    <li><a href="5.jpg"><img src="5_s.jpg" border="0" /></a></li>
    <li><a href="6.jpg"><img src="6_s.jpg" border="0" /></a></li>
    <li><a href="7.jpg"><img src="7_s.jpg" border="0" /></a></li>
    <li><a href="8.jpg"><img src="8_s.jpg" border="0" /></a></li>
    <li><a href="9.jpg"><img src="9_s.jpg" border="0" /></a></li>
    <li><a href="10.jpg"><img src="10_s.jpg" border="0" /></a></li>
    <li><a href="11.jpg"><img src="11_s.jpg" border="0" /></a></li>
    <li><a href="12.jpg"><img src="12_s.jpg" border="0" /></a></li>
    </ul>
    </div>

JavaScript(jQuery)

thickbox需要載入它的js及css，可以到其官網去下載

<script type="text/javascript" src="js/jquery.lightbox-0.5.pack.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

jQuery.noConflict();

jQuery(function(){
    $li = jQuery("#abgneBlock ul.list li");
    $li.each(function(i){
    jQuery(this).fadeTo(500+(3000*(Math.random() )), 0.5).hover(function(){
            jQuery(this).fadeTo('slow', 1);
            return false;
        },function(){
            jQuery(this).fadeTo('slow', 0.5);
            return false;
        
        });
    }).find("a").lightBox({fixedNavigation:true});;
});

範例網址