Question

我正在开展一个网页项目，我希望在页面顶部有一排图像，但除了一个之外，所有图像都会模糊不清。

我在想的是一个div，它将每个图像叠加为白色背景颜色，不透明度设置为0.5，其中一个图像完全可见。

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

在css3和jquery中滑动div

1 个答案: