试图将图像锁定在另一个图像的区域

时间:2013-08-22 17:11:16

标签: html css

我有一个扩展图像全屏的功能,我试图让一个关闭按钮始终包含在较大图像的右上角。 (上图:5px左:5px

<div id="full_image"><img src="" /><span>
<a href="#" class="close_full" ></a></span>

Css

#full_image {
width: 0px;
height: 0px;
left: 0px;
position: absolute;
opacity: 0;
z-index: 9;
}

#full_image img {
left: 10px;
width: 339px;
height: 211px;
position: relative;
overflow: hidden;
}

.close_full {
background: url("off.png") no-repeat scroll right top transparent;
cursor: pointer;
height: 29px;
right: 5px;
top: 5px;
margin-top: -36px;
opacity: 1;
position: absolute;
width: 29px;
z-index: 999;
}

我的jquery

$('.zoom_big').click(function () {
if (current === 0)
$('#full_image img').attr("src", get_org_images[0]);
$('#full_image img').attr("src", get_org_images[current]);

    $('#bg')
        .css("z-index", "6")
        .animate({opacity: 1}, '1500', function () {      
            $('#full_image').css("z-index", "900");
            $('#full_image').css("opacity", "1");
            var w = $(window);
            var sr = w.height() / w.width();

            var i = $('#full_image img').css({
                'width': 'auto',
                'height': 'auto'
            });
            var ir = i.height() / i.width();

            if (sr < ir) i.css('height', w.height());
            else i.css('width', w.width());


            var wd = Math.abs(i.width() - w.width());
            var hd = Math.abs(i.height() - w.height());
            if (wd != 0) {i.css('left', wd / 2);}
            // if (hd != 0) { i.css('top',hd / 2); }  
        });

0 个答案:

没有答案