Question

我在我的网站上使用动画响应式图像网格，它的工作效果很好。

https://github.com/codrops/AnimatedResponsiveImageGrid

但是，我希望当用户点击图像时，图像弹出（原始尺寸），其余背景模糊，即开发出一种奇特的盒子类型方法。

我发现脚本使用背景图像而不是图像。

我试图用这个存储bg图像，

$('#ri-grid ul li a').click(function(){
    var bg = $('#ri-grid ul li a').css('background-image');
        bg = bg.replace('url(','').replace(')','');
        alert(bg);
});

我的HTML部分是

<div id="container">
    <div id="ri-grid" class="ri-grid ri-grid-size-3">
        <ul>
        <li><a href="#"><img src="images/medium/1.jpg"/></a></li>
        <li><a href="#"><img src="images/medium/2.jpg"/></a></li>
        </ul>
    </div>
</div>

CSS

#container
{
    position:relative;
    width:100%;
    min-height:90%;
}

#ri-grid ul
{
    margin:0;
    padding:0;

}
#ri-grid ul li{
-webkit-perspective: 400px;
-moz-perspective: 400px;
-o-perspective: 400px;
-ms-perspective: 400px;
perspective: 400px;
margin: 0;
padding: 0;
float: left;
position: relative;
display: block;
overflow: hidden;
background: #000;
}

#ri-grid ul li a{
         filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(50%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
display: block;
outline: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
background-color: #333;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

.ri-grid-size-3 {
width: 100%;
margin-top: 0px;
}

.ri-grid {
margin:30px auto 30px;
position: relative;
height: auto;
top:-30px;
}

有人可以帮我吗？

动画响应式图像网格，如何放大点击图像？

0 个答案: