Question

非常自我解释，但不工作。

我想在用户点击图片时显示完整图片...

是的，我知道有很多插件可以做到这一点

我想保持简单。

任何想法？

css：

.full {
    display: none;
    width: 500px;
    height: 500px;
    margin-left: 100px;
    margin-top: -300px;
    position: fixed;
    background-color: #f00;
    z-index: 6;
}

.thumbnail {
    width: 50px;
    height: 50px;
}

HTML：

<img class="thumbnail" src="http://4.bp.blogspot.com/-uHbDP2EsXng/TxNEpTvI92I/AAAAAAAAAKY/UpfQIs7ztO0/s1600/rihanna-wallpaper.jpg">

jquery的：

$(document).ready(function() {
    $('.thumbnail').on('click', function() {
        var img = $('<img />',{src:this.src,'class':'full'});
        $('.full').html(img).show();
        console.log('done!');
    });
});

Answer 1

Try looking into how jQuery works.

$(document).ready(function() {
    $('.thumbnail').on('click', function() {
        $(this).addClass('full');
    });
});

您也可以覆盖该课程，而不是使用

添加课程

$(this).attr('class', 'full');

jQuery在点击时显示完整尺寸的图像

1 个答案: