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とjQueryUIを使用して、ユーザーがマウスをその上に置いたときにこれらの画像を大きくしています。これが私がこれまでに持っているコードです：

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

これは、アニメーション中はうまく機能しますが、画像が最大サイズに達すると、他の画像がリフローします（邪魔にならないように移動します）。何もリフローせずにこれを行う方法はありますか？

画像とコンテナ（）で'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を使用して画像のサイズを変更すると、リストアイテムがプレースホルダーとして機能するため、他の画像はリフローしません。

この例では、効果を少しきれいにするために、effect.sizeではなくanimateも使用しています。

お役に立てれば。幸運を。

于 2009-11-06T07:31:30.260 に答える
2

これが私の試みです。絶対配置された画像を保持するために、リストアイテムを相対的に配置するように設定しました。これは、指定したとおりに機能するようです。唯一の問題は、それらすべてをすばやく滑らせると、すべてがアニメートすることです。一度に1つだけサイズ変更できるように、そこに何かを追加したいと思います。

<!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プラグインを見つけることです。それらはたくさんあり、完璧でなくても、適応したり、そこから学んだりして、目的の結果を得ることができます。

自分で行うには、画像のコピーを2つ用意することをお勧めします。1つはリストとインラインで、もう1つはズームインする上部です。そうすれば、リストのレイアウトはズームされた画像にまったく依存しません。

テストされていないコード、考えているだけ：

//  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 に答える
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（）...）イメージへの関数呼び出しと、ベースイメージとまったく同じ場所に完全に配置しますが、1つのレイヤーを上に配置します（クローン要素をDOMのどこかにレンダリングします）
  3. クローン画像でアニメーションを作成します
  4. ホバーオフ時に、アニメーションを反転してから、複製された要素を完全に削除します。（。削除する（））

ものすごく単純。他の要素はそのままで移動しません。

于 2009-11-13T04:22:18.800 に答える
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 に答える