0

我有一个这样的图像列表：

<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 UI 使这些图像更大。这是我到目前为止的代码：

$(".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' });
  });

这在制作动画时效果很好，但是一旦图像达到其最大尺寸，其他图像就会重新流动（移开）。任何想法如何在不回流任何东西的情况下做到这一点？

我在图像和容器（the ）上尝试了'position：absolute;'，'position：relative'等的变体，<ul>但它并没有真正产生任何区别。

4

6 回答 6

3

您可以尝试以下方法：

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

这将防止图像推动其他图像，但它有点“吸”其他图像的相反问题，因为它被定位在不碍事的地方。

这里有一个很好的例子，使用 jQuery 来完成类似的效果。

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

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

希望这可以帮助。祝你好运。

于 2009-11-06T07:31:30.260 回答
2

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

<!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>
于 2009-11-12T21:54:52.877 回答
1

如果您使用 jquery 中的“动画”功能而不是“效果”，则效果很好（它不会重排）。我在 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>
于 2009-11-08T22:54:08.387 回答
1

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

  1. 用户将鼠标悬停在图像上
  2. 函数调用 CLONE ($(this).clone()...) 图像并绝对定位在与基本图像完全相同的位置，但在顶部一层（稍后在 DOM 中的某处渲染克隆的元素）
  3. 在克隆图像上制作动画
  4. 悬停时，反转动画，然后完全删除克隆的元素。（。消除（））

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

于 2009-11-13T04:22:18.800 回答
1

简单的答案通常是找到一个现有的 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
});  // $(

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

于 2009-11-12T15:00:52.140 回答
0

通过将原点设置为左上角而不是顶部中心，我得到了更好的结果。

但除此之外，情况大致相同。这是其他人可以做的事情：

<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>
于 2009-11-06T08:33:54.720 回答