代码之家  ›  专栏  ›  技术社区  ›  Mark A. Nicolosi

使用jquery用户界面“大小”效果时防止回流

  •  0
  • Mark A. Nicolosi  · 技术社区  · 15 年前

    我有这样的图片列表:

    <ul class='blah'>
      <li><img src='...' /></li>
      <li><img src='...' /></li>
      <li><img src='...' /></li>
      <li><img src='...' /></li>
    </ul>
    

    我把它设计成一个没有项目符号点的水平列表。有点像你在Github上看到的追随者(参见 http://github.com/chrislloyd )当用户将鼠标悬停在jquery和jquery用户界面上时,我使用jquery和jquery用户界面使这些图像变大。这是我到目前为止得到的代码:

    $(".blah img").hover(
      function() {
        $(this).effect("size",
          { to: { width: 64, height: 64 },
            origin: ['top','center'], scale: 'content' });
      },
      function() {
        $(this).effect("size",
          { to: { width: 32, height: 32 }, scale: 'content' });
      });
    

    这在动画制作时效果很好,但一旦图像达到最大尺寸,其他图像就会回流(让开)。有什么办法在不回流的情况下做到这一点吗?

    我在图像和容器(即 <ul> )但这并没有什么区别。

    6 回复  |  直到 15 年前
        1
  •  3
  •   greggian    15 年前

    您可以尝试如下操作:

    var pos = $(this).position();
    $(this).css({ position: "absolute",
                  top: pos.top, left: pos.left, zindex:10 }); 
    

    这将阻止图像推动其他人,但它有一个相反的问题,即“吸进”其他人,因为它被定位的方式。


    有一个相当不错的 example here 使用jquery来实现类似的效果。

    此示例使用列表项来排序为图像保留空间。我们将列表项向左浮动,并通过定位它们的“相对”并给它们一个明确的大小将它们隔开。然后将图像“绝对”定位到列表项中。现在,当我们使用jquery重新调整图像大小时,其他图像不会重新流动,因为列表项充当占位符。

    该示例还使用animate而不是effect.size来获得更清晰的效果。

    希望这有帮助。祝你好运。

        2
  •  2
  •   Ken Earley    15 年前

    这是我的尝试。我将列表项设置为相对定位,以保存绝对定位的图像。这似乎按您指定的方式工作。唯一的问题是,当你在它们上面快速滑动时,它们都是动态的。我假设您希望在其中添加一些内容,使一次只调整一个大小。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <title></title>
        <style type="text/css">
            li { position:relative; height:40px; width:40px; float:left; list-style:none; }
            li img { position:absolute; top:0; left:0; height:32px; width:32px; border:1px solid #666; background:#eee; }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $(".blah img").hover(
                  function() {
                    $(this).css("z-index", "2");
                    $(this).animate({
                      "height": "65px", "width": "65px", "top": "-16px", "left":"-16px"
                    }, "slow");
                  },
                  function() {
                     var that = this;
                    $(this).animate({
                      "height": "32px", "width": "32px", "top": "0", "left":"0"
                    }, "slow", "swing", function() { $(that).css("z-index", "1"); });
    
                  });
            });
        </script>
    </head>
    
    <body>
        <ul class='blah'>
          <li><img src='http://www.gravatar.com/avatar/116ed602629e00b79eae9af774398bb0?s=24&d=http%3A%2F%2Fgithub.com%2Fimages%2Fgravatars%2Fgravatar-24.png' /></li>
          <li><img src='http://www.gravatar.com/avatar/116ed602629e00b79eae9af774398bb0?s=24&d=http%3A%2F%2Fgithub.com%2Fimages%2Fgravatars%2Fgravatar-24.png' /></li>
          <li><img src='http://www.gravatar.com/avatar/116ed602629e00b79eae9af774398bb0?s=24&d=http%3A%2F%2Fgithub.com%2Fimages%2Fgravatars%2Fgravatar-24.png' /></li>
          <li><img src='http://www.gravatar.com/avatar/116ed602629e00b79eae9af774398bb0?s=24&d=http%3A%2F%2Fgithub.com%2Fimages%2Fgravatars%2Fgravatar-24.png' /></li>
        </ul>
    
    </body>
    </html>
    
        3
  •  1
  •   btelles    15 年前

    如果您使用jquery中的“animate”函数而不是“effect”,它会很好地工作(不会回流)。我在firefox 3、chrome和ie 8中尝试了以下代码,在所有情况下都没有回流。功能如下:

        $(".blah img").hover(
          function() {
            $(this).animate( {'width': 64, 'height': 64 });
          },
          function() {
            $(this).animate( {'width': 32, 'height': 32 });
          });
    

    下面是我用来测试函数的整页:

        <?xml version="1.0" encoding="UTF-8"?>
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head>
        <script src="../jquery.js" type="text/javascript"></script>
        <script type="text/javascript" >
                $(document).ready( function() {
                $(".blah img").hover(
                  function() {
                    $(this).animate( {'width': 64, 'height': 64 });
                  },
                  function() {
                    $(this).animate( {'width': 32, 'height': 32 });
                  });
                });
        </script>
        <style type="text/css" rel="stylesheet">
          ul li { 
            float: right;
            list-style: none;
          }
        </style>
        </head>
        <body>
        <ul class='blah'>
          <li><img src='../i32.jpg' /></li>
          <li><img src='../i32.jpg' /></li>
          <li><img src='../i32.jpg' /></li>
          <li><img src='../i32.jpg' /></li>
        </ul>
        </body>
        </html>
    
        4
  •  1
  •   Marcus Downing    15 年前

    简单的答案通常是找到一个已经做了你想要的事情的现有jquery插件。他们有很多,即使一个不完美的,你可以适应或从中学习,以获得想要的结果。

    要自己做,我建议有两个图像的副本:一个与列表对齐,另一个在顶部放大。这样列表的布局就完全不依赖于缩放后的图像。

    未测试的代码,只是在想:

    //  on page load, process selected images
    $(function () {
      $('img.hoverme').each(function () {
        var img = $(this);
        var alt = $("<img src='" + img.attr('src') + "'/>");
        img.after(alt);
        alt.hide();
    
        img.hover(function () {
          var position = img.position();
          alt.css({ 
            position: "absolute",
            top: position.top,
            left: position.left,
            width: 32,
            height: 32
          }).animate({
            top: position.top - 16,
            left: postion.left - 16,
            width: 64,
            height: 64
          });
        }, function () { });
    
        alt.hover(function () { }, function () {
          var position = img.position();
          alt.animate({
            top: position.top,
            left: position.left,
            width: 32,
            height: 32
          }, function () {
            alt.hide();
          });  // alt.animate
        });  //  alt.hover
    
      });  //  each
    });  // $(
    

    当鼠标移到较小的图像上时,会创建较大的图像,并将其悬停在上面,然后立即展开到位。当鼠标离开较大的图像时,它会收缩然后消失。

        5
  •  1
  •   Joshua    15 年前

    您需要一个执行以下操作的函数:

    1. 用户将鼠标悬停在图像上
    2. 函数调用clone($(this).clone()…)图像,并将其绝对定位在与基图像完全相同的位置,但在顶部有一层(稍后在DOM中的某个位置呈现克隆的元素)
    3. 在克隆的图像上进行动画制作
    4. 当鼠标悬停在关闭位置时,反转动画,然后完全删除克隆的元素。(.remove())

    很简单。其他元素将保持不变,不会移动。

        6
  •  0
  •   dlamblin    15 年前

    通过将原点设置为左上角而不是上中心,我得到了一个稍好的结果。

    但不然就差不多了。以下是其他人要做的事情:

    <html><head><title>HELL NO WE WON'T REFLOW</title>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js'></script>
    <script>
    jQuery(function($) {
      $('.blah img').each(function(){
        var p = $(this).position();
        $(this).css({top:p.top,left:p.left});
      });
      $('.blah img').each(function(){
        //$(this).css({position:'absolute'});
      });
      $(".blah img").hover(
      function() {
        $(this).effect("size",
          { to: { width: 375, height: 91 },
            origin: ['top','left'], scale: 'content' });
      },
      function() {
        $(this).effect("size",
          { to: { width: 250, height: 61 }, scale: 'content' });
      });
    });
    </script>
    </head>
    <body>
    <ul class="blah">
    <li><img src='http://sstatic.net/so/img/logo.png'/></li>
    <li><img src='http://sstatic.net/so/img/logo.png'/></li>
    <li><img src='http://sstatic.net/so/img/logo.png'/></li>
    <li><img src='http://sstatic.net/so/img/logo.png'/></li>
    </ul>
    </body>
    </html>