jquery - 在 css3 和 jquery 中滑动 div

Question

我正在做一个 Web 元素，我希望在页面顶部有一排图像，但除一个图像外，所有图像都会被模糊掉。

我想的是一个 div，它用白色背景颜色覆盖每个图像，不透明度设置为 0.5 左右，其中一个图像完全可见。

将有两个按钮，上一个和下一个，当按下其中一个按钮时，清除 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();
});​