点击jQuery显示全尺寸图像

jQuery show full size image on click

本文关键字：图像 全尺寸 显示 jQuery 点击      更新时间：2023-09-26

几乎不言自明，但不起作用。

我想在用户点击图像时显示完整的图像。。。

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

我想保持简单。

有什么想法吗？

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!');
    });
});

试着研究一下jQuery是如何工作的。

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

你也可以覆盖类，而不是用添加一个

$(this).attr('class', 'full');
相关文章：