/add类

Question

有5个瓷砖，如果我点击其中之一，它会打开他们(宽度100%)，当我点击右上角的X，它关闭它的工作良好。但是当它打开时，我再次单击蓝色框，它将覆盖全局vars，而onclick Close不再知道旧的位置。

小提琴在这里，小提琴

HTML

<div class="tile" id="tp1">
    <img class="bus" src="http://s14.directupload.net/images/131130/4gzq9oaz.png" />
    <div class="close">x</div>
</div>

CSS

.tile, .tile_open {
    position: absolute;
    background-color:#0090db;
}

/*//////////////////////////////////////
        Tile Width And Location eddid here
///////////////////////////////////////*/
#tp1{
    width: 100px;
    height: 50px;       
}
/*//////////////////////////////////////
                IMG SIZE
///////////////////////////////////////*/
img {
    width: 100%;
    height: 100%;
}

/*//////////////////////////////////////
           Close Button
///////////////////////////////////////*/
.close {
    display: none;
    background-color:#C85051;
    position: absolute;
    top: 0;
    right: 5px;
    width: 50px;
    height: 25px;
    text-align: center;
}

.open .close {
    display: block;
}

Jquery

var posL , posT;

$(".tile").on("click", function (e) { 
    var pos= $(this).position();
         posL = $(this).css('left'),
         posT = $(this).css('top');

    e.stopPropagation();
    if(!$(this).hasClass('open') ) {
        $(this).animate({
            "top": pos.top - pos.top,
            "left":pos.left - pos.left,
            "width": "100%",
            "height": "100%"
        }, 1000).addClass('open')
        $(this).removeClass('tile').addClass('tile_open'); //<-- This was my try to get it to work
    }


});



$(".close").on("click", function (e) {
    e.stopPropagation();
    $(this).parent().stop().animate({
        "left" : posL,
        "top" : posT,
        "width": "100px",
        "height": "50px"
    }, 1000).removeClass('open')
    $(this).removeClass('tile_open').addClass('tile');//<-- This was my try to get it to work

});

Answer 1

脚本的主要问题是，当您单击蓝色img时，它会设置原始位置，这很好。

但是，如果当它很大的时候再次单击它，它会再次设置它，而则是错误的。

这是错误的，因为您在那些vars 中存储之前的位置，然后检查div实际上是否已经是全屏的。

演示

所以你必须改变这一点：

$(".tile").on("click", function (e) { 
var pos= $(this).position();
     posL = $(this).css('left'),
     posT = $(this).css('top');

e.stopPropagation();
if(!$(this).hasClass('open') ) {

到这个

$(".tile").on("click", function (e) { 
e.stopPropagation();
if(!$(this).hasClass('open') ) {
    var pos= $(this).position();
     posL = $(this).css('left'),
     posT = $(this).css('top');

这只是主要的问题。您还需要在元素z-index获得完整页面时增加它，并在它进入原始状态时减小它，否则它将停留在另一个蓝色div之下。看看我的演示。在我的演示中，我还将margin:0放到了身体上(更准确地说，在动画中)，并使用了以下方法

var pos= $(this).offset();
     posL = pos.left,
     posT = pos.top;

而不是这个

var pos= $(this).position();
     posL = $(this).css('left'),
     posT = $(this).css('top');

再说一次更精确点。(我不知道页面和offset的完整结构，这更好，因为偏移是元素相对于文档的位置)

Answer 2

你的问题是范围。单击第一张图片时，它会打开并存储x，y，但单击下一张图片时，它会覆盖前面的x，y坐标，因此需要更改值的范围。

这里有一个正确限定范围的JS示例。http://jsfiddle.net/Nemesis02/2Zx3m/23/

$(".tile").on("click", function (e) { 
    var pos= $(this).position(),
        posL = $(this).css('left'), posT = $(this).css('top');

    var closeFunction = function (e) {
        e.stopPropagation();
        $(this).parent().stop().animate({
            "left" : posL,
            "top" : posT,
            "width": "100px",
            "height": "50px"
        }, 1000).removeClass('open')
        $(this).removeClass('tile_open').addClass('tile');//<-- This was my try to get it to work
        $(this).unbind('close', closeFunction)
    };

    e.stopPropagation();
    if(!$(this).hasClass('open') ) {
        $(this).animate({
            "top": pos.top - pos.top,
            "left":pos.left - pos.left,
            "width": "100%",
            "height": "100%"
        }, 1000).addClass('open')
        $(this).removeClass('tile').addClass('tile_open'); //<-- This was my try to get it to work
        $(this).find(".close").on("click", closeFunction);
    }


});

Answer 3

在您的示例中，需要执行以下操作：

1.通过正确删除tile_open还原类名值

2.利用offset()函数检索最高位置。

http://jsfiddle.net/2jnM2/

var posL , posT;

$(".tile").on("click", function (e) { 
    var pos= $(this).position();
         posL = $(this).css('left'),
         //posT = $(this).css('top');
             posT = $(this).offset().top;

    e.stopPropagation();
    if(!$(this).hasClass('open') ) {
        $(this).animate({
            "top": pos.top - pos.top,
            "left":pos.left - pos.left,
            "width": "100%",
            "height": "100%"
        }, 1000).addClass('open')
        $(this).removeClass('tile').addClass('tile_open'); //<-- This was my try to get it to work
    }


});



$(".close").on("click", function (e) {
    e.stopPropagation();
    $(this).parent().stop().animate({
        "left" : posL,
        "top" : posT,
        "width": "100px",
        "height": "50px"
    }, 1000).removeClass('open').removeClass('tile_open').addClass('tile');//<-- This was my try to get it to work

});