Question

我正在尝试实现与此网站相同的效果 - http://sbe.com/nightlife/locations/hyde-bellagio（具有放大并提供购买门票和预订按钮的事件的组件）。我已经制作了这样的缩略图但放大效果是不好，我不知道怎么用买票和预订添加div效果。

我使用了jquery组合插件我制作了缩略图......第一个li有点不同我尝试了hoverpulse插件。

<ul class="thumbs">

        <li>

            <a href="#thumb1" class="thumbnail"> <img class="pulse" src="images/thumb1.jpg"/>
            <h4>14 Aug</h4><span class="description">Event</span></a>


        </li>

        <li>
            <a href="#thumb2" class="thumbnail" style="background-image: url('images/thumb2.jpg')"><span class="description">Fast and reliable performance</span></a>
        </li>
        <li>
            <a href="#thumb3" class="thumbnail" style="background-image: url('images/thumb3.jpg')"><span class="description">Slick and responsive website</span></a>
        </li>
        <li>
            <a href="#thumb4" class="thumbnail" style="background-image: url('images/thumb4.jpg')"><span class="description">Reduce costs and increase productivity</span></a>
        </li>
        <li>
            <a href="#thumb5" class="thumbnail" style="background-image: url('images/thumb5.jpg')"><span class="description">Brochures, logos, banners</span></a>
        </li>
        <li>
            <a href="#thumb6" class="thumbnail" style="background-image: url('images/thumb6.jpg')"><span class="description">Nunc condimentum magna</span></a>
        </li>
        <li>
            <a href="#thumb7" class="thumbnail" style="background-image: url('images/thumb7.jpg')"><span class="description">Nunc condimentum magna</span></a>
        </li>
        <li>
            <a href="#thumb8" class="thumbnail" style="background-image: url('images/thumb8.jpg')"><span class="description">Morbi pellentesque quam vitae</span></a>
        </li>
        <li>
            <a href="#thumb9" class="thumbnail" style="background-image: url('images/thumb9.jpg')"><span class="description">Phasellus ultrices, dolor sit amet dapibus</span></a>
        </li>
        <li>
            <a href="#thumb10" class="thumbnail" style="background-image: url('images/thumb10.jpg')"><span class="description">Vivamus massa dolor, commodo</span></a>
        </li>
        <li>
            <a href="#thumb11" class="thumbnail" style="background-image: url('images/thumb11.jpg')"><span class="description">Sed lobortis at nisl non pellentesque</span></a>
        </li>
        <li>
            <a href="#thumb12" class="thumbnail" style="background-image: url('images/thumb12.jpg')"><span class="description">Proin lorem est, rhoncus ullamcorper </span></a>
        </li>
        <li>
            <a href="#thumb13" class="thumbnail" style="background-image: url('images/thumb13.jpg')"><span class="description">Quisque suscipit, est a condimentum</span></a>
        </li>
        <li>
            <a href="#thumb13" class="thumbnail" style="background-image: url('images/thumb14.jpg')"><span class="description">Aenean condimentum diam nibh</span></a>
        </li>
    </ul>

这是用于初始化插件的jquery函数。

 $(document).ready(function() {
            $('.thumbs').portfolio({
                cols: 5

            });
        });

    $(document).ready(function() {
$('.pulse').hoverpulse({
    size: 40,  // number of pixels to pulse element (in each direction)
    speed: 400 // speed of the animation 
});

}）;

我已经制作了这个整个缩略图系统，就像它在我展示的网站上一样，但当我尝试放大图片时，它不能翻过其他图片，就像在网站上它只会扩大到自己的边界内。任何人都可以帮助我解决了这个问题，并指出了我正确的方向，所以我也可以添加购买机票组件？

用标题放大图片

0 个答案: