Question

剧情说明：

有大量不同大小和属性的div，它们都有box类。
所有框都隐藏着display: none。
这些方块不能具有“绝对”位置。
当页面加载时，这些框将开始逐个切换。
jQuery的切换效果从元素的左上角开始。

问题：

我希望切换效果从框的中心（高度和宽度）开始。我的意思是如果盒子大小是100px * 100px，效果应该从顶部50px和左边50px开始。我怎么能用jQuery做到这一点？

Answer 1

如果你理解你的意思，那就应该这样做。

可以找到正在运行的示例here。

首先写下你的html：

<div id="container">
 <div id="link">
     <a href="javascript:void(0)" id="boxOne">Click Me</a>
 </div>
 <div id="boxOneContent" class="box">
     <div class="content">
         <h1>Hello World</h1>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscingelit. Ut ullamcorper consequat dui tempor euismod.</p>
         <p>Nam vel odio massa, sed lacinia sapien. Cras ac
         nisi.</p>
     </div>
 </div>

链接的ID与相应框的id的第一部分匹配。对于我在容器div中添加的演示，用户可以单击页面上的任意位置以关闭该框。框内的内容还有一个容器，用于在框展开时停止内容包装。

现在是你的CSS，它将盒子集中放在链接上。我只在这里介绍了它的关键方面，请查看完整代码的演示：

#link {
float: left;
border: 1px solid red;
text-align: center;

width: 40px;
height: 40px;
padding: 5px;

margin-left: 125px;
margin-top: 125px;
}

#boxOneContent
{
background-color: #000;
color: #fff;

padding: 20px;
width: 160px;
height: 160px;
position: absolute;

top: 150px;
left: 150px;

margin-left: -100px;
margin-top: -100px;

display: none;}

通过定义#link的宽度，高度，填充和边距，此元素的中心距离顶部150px，距离左侧150px。以下是工作方式：125 +（（40 +（5 * 2））/ 2）= 150。

包含填充，＃boxOneContent的总宽度和高度为200px。因此，边距设置将向上移动div并向左移动框的一半大小。这就是当div出现在右下方（像往常一样）而且向左上方移动以达到这些边缘时，div“向外”增长的原因。

最后这里是jQuery将它们整合在一起：

$(document).ready(function($) {

    $('a').click(function(){

        if($('.box#'+$(this).attr('id')+'Content').hasClass('active') == true) {
            $('.box#'+$(this).attr('id')+'Content').removeClass('active').hide(200);
        } else {
             $('.box.active').removeClass('active').hide(200);
             $('.box#'+$(this).attr('id')+'Content').addClass('active').show(1000);
        }
     });

     $("body").click(function(){
          $(".box").removeClass("active").hide(200);
     });

     $("a").click(function(e){
          e.stopPropagation();
     });
 });

如果与点击链接对应的框可见（活动），则其隐藏。否则，将隐藏任何可见框，并显示与单击链接对应的框。如果用户点击页面上的任何位置（除了链接），则会关闭所有打开的框。快乐的编码！

Reference

jQuery切换对象从中心的可见性

1 个答案: