所以我试图使我的画廊更好。我想要当用户单击元素以在屏幕中间打开图像时。我敢肯定,添加类或其他方法是一种有效的方法。
我该怎么办 ?
HTML
<ul class="gallery">
<li>
<img src="img/1.png" />
<div class="caption" onclick="view('1.png')">
<div class="blur"></div>
<div class="caption-text">
<h1>+</h1>
</div>
</div>
</li>
<li>
<img src="img/2.png" onClick="view('2.png');">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h1>+</h1>
</div>
</div>
</li>
<ul>
Javascript:
<script type="text/javascript">
function view(imgsrc) {
viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300');
}
</script>
最佳答案
我想我正是您要找的东西。
您可以寻找一些CSS和here示例
这就是魔术发生的地方:
popup = {
init: function(){
$('li').click(function(){
popup.open($(this));
});
$(document).on('click', '.popup img', function(){
return false;
}).on('click', '.popup', function(){
popup.close();
})
},
open: function($li) {
$('.gallery').addClass('pop');
$popup = $('<div class="popup" />').appendTo($('body'));
$fig = $li.clone().appendTo($('.popup'));
$bg = $('<div class="bg" />').appendTo($('.popup'));
$close = $('<div class="close"><svg><use xlink:href="#close"></use></svg></div>').appendTo($fig);
$shadow = $('<div class="shadow" />').appendTo($fig);
src = $('img', $fig).attr('src');
$shadow.css({backgroundImage: 'url(' + src + ')'});
$bg.css({backgroundImage: 'url(' + src + ')'});
setTimeout(function(){
$('.popup').addClass('pop');
}, 10);
},
close: function(){
$('.gallery, .popup').removeClass('pop');
setTimeout(function(){
$('.popup').remove()
}, 100);
}
}
popup.init()
这应该涵盖弹出逻辑。
对于居中问题,您应该查看上面的链接并查看CSS文档。
Fabio Ottaviani 的工作做得很好。
希望能帮助到你 :)
关于javascript - 单击时,在屏幕中央打开图像,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37904705/