7

我正在开发一个应用程序，它显示用户并排上传的图像缩略图。我希望能够显示完整尺寸的图像以及有关它的一些信息。

我的解决方案是在#wrapper单击图像以显示显示全尺寸图像的页面时向上滑动（可能通过 iframe 的帮助，尚不确定）。

我正在努力迈出第一步，即向上滑动#wrapper。下面的代码应该可以工作，但没有显示滑动动画 -#wrapper只是消失了。如果我从图像中删除该类.image，然后添加该行<p class="images">Test</p>并单击它，则滑动可以工作，但是图像会失去样式。

那么这里有什么问题呢？我看到有几个相同主题的问题，但都是关于使用表格的。

HTML：

<section id="wrapper">
    <div id="blogs">
        <div class="blog">
        <div class="post">
            <img class="images" src="images/image1.png" />
            </div>
        </div>
        <div class="blog">
        <div class="post">
            <img class="images" src="images/image2.png" />
            </div>
        </div>
        <div class="blog">
        <div class="post">
            <img class="images" src="images/image2.png" />
            </div>
        </div>
    </div>
</section>

jQuery :

$('.images').click(function (){
    $('#wrapper').slideUp('slow', function() {
    });
});

CSS：

#wrapper {
    background: yellow;
    margin: 0px auto;
    width: 100%;
    height: 1000px;
    position: relative;
    top: -20px;
    left: 20px;
    text-align: left;
    margin: 0px auto;
    padding: 10px;
}

.post {
    background: white;
    width: 200px;
    height: 220px;
    margin: 0px auto;
    float: left;
    margin-right: 30px;
    margin-bottom: 30px;
    position: relative;
    padding: 5px;
    -moz-box-shadow: 0 0 4px 1px #777;
    -webkit-box-shadow: 0 0 4px 1px#777;
    box-shadow: 0 0 4px 1px #777;
}

.images {
    margin-left: 5px;
    margin-top: 5px;
    width: 188px;
    height: 170px;
    border: 1px solid #aaa;
    border-radius: 2px; 
    -moz-border-radius: 2px; 
    -webkit-border-radius: 2px;
}

.blogs {
    height: 400px;
}
4

1 回答 1

1

它对我有好处（Chrome）。但试试这个：

<section id="wrapper">
    <div id="blogs">
        <div class="blog">
           <div class="post">
               <span class="images">
                  <img src="images/image2.png" alt="" >
               </span>
            </div>
        </div>
    </div>
</section>
于 2012-05-13T15:05:27.763 回答