Question

jsFiddle

  $(document).ready (function(){
    $("a").click(function(){
            $(".myCanvas").fadeIn();
            $(".myCanvas").html ($(this).html());               
    }); 
});

a是图片链接。是否可以将$(this).css({});置于$(this.html)内？我想要做的是当我点击图像时，我希望图像出现在网页中间，背后有透明的黑色背景，以覆盖其他图像而不使用Fancybox和灯箱。

Answer 1

在这里你老兄：

http://jsfiddle.net/mattdlockyer/SyJSS/1/

CSS：

#img-container {
    position:fixed;
    display:none;
    top:50%;
    left:50%;
    margin-top:-50px;
    margin-left:-100px;
    z-index:9999;
}

JS：

$('.img').on('click', function (e) {
    $('#img-cover').fadeIn();
    var img = $(this);
    $('#img-container').html(img.clone())
        .css({
        'margin-top': '-' + img.height() / 2 + 'px',
            'margin-left': '-' + img.width() / 2 + 'px'
    }).fadeIn();
});

$('#img-cover').on('click', function () {
    $('#img-cover').fadeOut();
    $('#img-container').fadeOut();
});

来源：http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

意见：使用图书馆。通常会有一些轻量级的因素会影响浏览器的兼容性。一直在推出自己的解决方案是一件痛苦的事。

Answer 2

Here是一个解决方案的小提琴。单击图像（彩色块）以打开myCanvas并使用所选图像填充它。点击myCanvas中的任意位置隐藏它，然后选择其他图片。

<强> HTML：

<div id="wrapper">
    <div class="images_box">
        <a><img style="background: red;" /></a>
         <a><img style="background: blue;" /></a>
         <a><img style="background: green;" /></a>
         <a><img style="background: black;" /></a>
         <a><img style="background: pink;" /></a>
    </div>
    <div class="myCanvas"></div>
</div>

<强> CSS：

* {
    padding: 0px;
    margin: 0px;
}
#wrapper {
    position: relative;
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    height: 300px;
    /*background: #123;*/
}
.images_box {
    width: 100%;
    height: 60px;
}
img {
    display: inline-block;
    height: 50px;
    width: 50px;
    margin: 0px;
    padding: 5px;
}
.myCanvas {
    display: none;
    width: 100%;
    height: 300px;
    position: absolute;
    top: 0px;
    left: 0px;
    background: #999;
}

<强> JavaScript的：

$(document).ready(function () {
    $('a').click(function () {
        $('.myCanvas').fadeIn();
        $('.myCanvas').html($(this).html());
        $('.myCanvas').children().css('display', 'block');
        $('.myCanvas').children().css({
            'margin-left': 'auto',
            'margin-right': 'auto'
        });

        var topMargin = 125;

        $('.myCanvas').children().css('margin-top', topMargin);
    });

    $('.myCanvas').click(function () {
        $('.myCanvas').fadeOut();
    });
});

它拍摄图像（将html复制到myCanvas），然后将其居中。

jQuery如何纵向和横向a.k.a.图像灯箱中心图像？

2 个答案: