在CSS3和jQuery

Question

我在web項目中，我想在頁面的頂部有圖像的連續工作，但所有的圖片滑動的div將除了一個被模糊了。

我在想的是，與白色背景顏色和不透明度設置爲像0.5與圖像中的一個是完全可見覆蓋每個圖像一個div。

將有兩個按鈕，一個和下一個，當其中一個按鈕被按下清除DIV將在未來圖像滑動顯示，圖像和先前圖像將已經模糊像上面提到。

有沒有人對我怎麼能這樣做實現這一..

感謝您的幫助

Answer 1

做了一個小測試任何想法，你的意思是這樣嗎？ 爲了讓他們真正走出模糊，雖然是不容易。但這是我認爲的一個起點。

演示：
http://jsfiddle.net/2MExB/3/

HTML：

<div id="c"><ul> 
<li><img height="100" src="..."/></li> 
<li><img height="100" src="..."/></li> 
<li><img height="100" src="..."/></li> 
</ul><div id="m" ></div></div> 
<br/> 
<button>prev</button><button>next</button>​ 

CSS：

li{ 
float:left; 
} 

#c{ 
    position:relative; 
    overflow:hidden;  
} 
#m{ 
    position:absolute; 
    top:0; 
    border:0 solid white; 
    height:100%; 
    width:100px; 
    opacity:.8; 
}​ 

JS：

$(function() { 
    var current = 0; 
    $('button').click(function(ev) { 
     current += 1 * ($(this).text() == 'next' ? 1 : -1); 
     show(); 
     ev.preventDefault(); 
    }); 

    function show() { 
     var c = $('ul li').length; 
     current = current < 0 ? c - 1 : (current > c - 1 ? 0 : current); 
     var $t = $('ul li:eq(' + current + ')'); 
     var l = $t.position().left; 
     var w = $t.width(); 
     var cw = $('#c').width(); 
     $('#m').stop().animate({ 
      'width': w, 
      'border-width': '0 ' + (cw - l - w) + 'px 0 ' + l + 'px' 
     }, 300); 
    } 
    show(); 
});​