當使用jQuery UI的「規模效應」

防止迴流我有這樣的圖像列表：當使用jQuery UI的「規模效應」

<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' }); 
    });

這種運作良好，而它的動畫，但是一旦圖像達到其最大尺寸的其他圖像迴流（遷出的方式）。任何想法如何做到這一點而不迴流任何東西？

我在圖像和容器（<ul>）上嘗試過'位置：絕對'，'位置：相對'等變體，但它並沒有真正的區別。

來源

2009-11-04 Mark A. Nicolosi

嗨馬克，這些答案中的任何一個都有幫助嗎？ – btelles 2009-11-10 05:04:19

幾個答案是有幫助的（包括你的）。我一直很忙，推遲了這個「閃亮」的功能，但這些答案一定會幫助我包括它。謝謝大家！ – 2009-11-13 22:57:36

你可以嘗試這樣的：

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

這將保持圖像從推別人，但它像是有「吮吸」其他人在，因爲它被定位出的方式相反的問題。

有一個很不錯的example here使用jQuery來實現類似的效果。

本示例使用列表項來排序爲圖像保留空間。我們將剩下的列表項目浮起來，並通過定位它們'相對'並給它們一個明確的大小來將它們分開。然後圖像在列表項中被定位爲「絕對」。現在，當我們使用jQuery重新調整圖像大小時，其他圖像不會重新流動，因爲列表項充當佔位符。

該示例還使用animate而不是effect.size來獲得更清晰的效果。

希望這會有所幫助。祝你好運。

來源

2009-11-06 07:31:30 greggian

這個例子很棒，我希望當我搜索一個小時左右時能找到類似的東西。當我回到家時，我會玩。謝謝！ – 2009-11-06 17:34:12

通過將原點設置爲左上角而不是頂點，我得到了稍好的結果。

但其他方面都差不多。這裏的東西給別人工作：

<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-06 08:33:54 dlamblin

是的，對我來說沒有任何明顯的不同。謝謝。 – 2009-11-06 17:39:07

如果使用「動畫」功能從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-08 22:54:08 btelles

最簡單的答案通常是找到一個現有的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-12 15:00:52

這是我的嘗試。我將列表項目設置爲相對於保持絕對定位的圖像。這似乎按照您指定的方式工作。唯一的問題是，當你快速滑過所有的人時，他們都是動畫。我會假設你想在那裏添加一些東西，使其中一次只能調整一個。

<!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-12 21:54:52

我其實很喜歡這種效果，它們都是以十分之幾秒的間隔進行動畫製作。 – 2009-11-13 22:58:35

你需要一個做以下的功能：

用戶將鼠標懸停圖像
來電功能克隆（$（本）.clone（）...）圖像和絕對位置與基礎圖像完全相同，但頂部有一層（在DOM後面渲染克隆的元素）
對克隆圖像執行動畫
關閉懸停時，反轉動畫，然後刪除克隆元素完全。（.remove（））

很簡單。其他元素將保持不動，不會移動。

來源

2009-11-13 04:22:18 Joshua

當使用jQuery UI的「規模效應」

回答

相關問題