div3 {

Question

我在jquery中并不完美，我的代码中存在问题。在这段代码中我有4个div修复高度和宽度。问题是当我点击任何div时，单击的div应该位于中心（水平和垂直）。

这是我的代码＆gt; http://jsfiddle.net/THE_j/02asmj4w/1/

$(document).ready(function(){

    $('.col').click(function(){
        var windowWidth = $(window).width();
        var windowHeight = $(window).height();
        var divWidth = $(".col").width();
        var divHeight = $(".col").width();
        var test=(windowWidth-divWidth)/2;
        var marginLeft = $(this).css({"margin-left":(windowWidth-divWidth)/2});
        var margintop = $(this).css({"margin-top":(windowHeight-divHeight)/2});

        $(this).animate({ 
            width : '250px', 
            height:'250px', 
        });

    });
});

Answer 1

问题在于以下几点：

var divWidth = $(".col").width();
var divHeight = $(".col").width();

你有元素的默认值100（顺便说一下，你使用.width()来获取高度）而不是250，这个元素在动画之后有。< / p>

您只需将这两个变量设置为250：

即可

var divWidth = 250;
var divHeight = 250;

<强>更新即可。同样，为了正确居中，您可以隐藏所有其他div：

$('.col').not(this).hide();

或将position元素设置为absolute。

$(this).css("position", "absolute");

Updated fiddle

当然，为250使用常量（变量）会更好，而不仅仅是在代码中有多个魔法250值。

Answer 2

完全重写了解决方案：http://jsfiddle.net/02asmj4w/15/ 为什么？因为我迫不及待早上一些小事......

我的解决方案做了什么： - 它将点击的框水平和垂直居中在视口内

如果点击了另一个框，则当前居中的框会回到其初始位置
如果单击居中框，则会返回其初始位置
四个初始框保留在页面顶部
由于您最初使用过的漂浮物而没有更多的动画片......

我做了什么： - 除了班级之外，每个div现在都有一个id。

类css如下所示

.col { 身高：100px; 宽度：100px; 向左飘浮; margin-left：10px; margin-top：5px; 位置：绝对; 顶部：0px; }
id css只设置每个div的左侧位置，并设置一些不同的背景颜色以更好地区分方框

div3 {
```
left: 220px;
background: #cde;
```
}

好吧......那只是造型的东西，这里没什么特别的...... 现在为js：

var leftOffset; //declare a global variable leftOffset for later usage

$('.col').click(function () {              // on click
    if (!$(this).hasClass("clicked")) {    // if clicked div is not the centered one
        // get viewport dimensions and set needed margins
        var currentViewPortWidth = $(window).width();
        var currentViewPortHeight = $(window).height();
        var marginLR = (currentViewPortWidth - 250) / 2;
        var marginTB = (currentViewPortHeight - 250) / 2;
        leftOffset = $(this).css("left");  // store clicked div left offset in global var 

        $(".clicked").animate({            // define the 'go back to initial pos' animation
            width: '100px',
            height: '100px',
            left: leftOffset,
            marginLeft: '10px',
            marginTop: '5px'
        }).removeClass("clicked");         // remove 'clicked' class handler

        $(this).animate({                  // define 'clicked div go to center' animation
            width: '250px',
            height: '250px',
            left: '0px',
            marginLeft: marginLR,
            marginTop: marginTB
        }).addClass("clicked");            // set clicked class handler


    } else {                               // else means: clicked div is the centered one
        $(this).animate({                  // define the 'go back to initial pos' animation
            width: '100px',
            height: '100px',            
            left: leftOffset,
            marginLeft: '10px',
            marginTop: '5px'
        }).removeClass("clicked");
    }
});

// ensure, that the div stays centered on window resize
$(window).resize(function () {
    var currentViewPortWidth = $(window).width();
    var currentViewPortHeight = $(window).height();
    var marginLR = (currentViewPortWidth - 250) / 2;
    var marginTB = (currentViewPortHeight - 250) / 2;
    $('.clicked').css({"margin-left": marginLR, "margin-top": marginTB});
});

Div应该在中心点击

2 个答案:

div3 {