0

剧情解释：

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

问题：

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

4

1 回答 1

2

如果理解你的意思，这应该做到。

运行示例可以在这里找到。

首先写你的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 定义宽度、高度、内边距和边距，该元素的中心距顶部150 像素，距左侧150 像素。这是工作原理：125+((40+(5*2))/2) = 150。

包括填充在内，#boxOneContent 的总宽度和高度为 200 像素。因此，边距设置会将 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();
     });
 });

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

参考

于 2013-01-22T20:09:27.390 回答