几乎不言自明,但不起作用。
我想在用户点击图像时显示完整的图像。。。
是的,我知道有很多插件可以做到这一点,但
我想保持简单。
有什么想法吗?
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');