使用 jQuery UI“大小”效果时防止回流
https://stackoverflow.com/questions/1671633
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
我有一个这样的图像列表：
<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>）但实际上并没有什么区别。
解决方案
您可以尝试是这样的：
var pos = $(this).position();
$(this).css({ position: "absolute",
top: pos.top, left: pos.left, zindex:10 });
这将保持图像从推他人但它像是具有相反的问题中，因为它被定位的方式进行“抽吸”其他人。
有是一个不错的示例的使用jQuery以实现类似的效果。
此示例使用列表中的项目进行排序的预留空间中的图像。我们通过定位他们“相对”，并给他们一个明确的大小浮动左边的列表中的项目和他们的空间了。然后将图像列表项中的定位“绝对”。现在，当我们使用jQuery重新大小我们的图像，其他图像不因为列表项充当一个占位符重新流动。
该示例还使用动画，而不是用于effect.size一点清洁效果。
希望这有助于。好运。
其他提示
下面是我的尝试。我设置列表项相对于保持绝对定位的图像定位。这似乎为你指定的工作。唯一的问题是，当你快速滑过所有的人，他们都动画。我会假设你要添加的东西在里面，使其只有一个重新调整的时间。
<!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>
如果您从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>
最简单的答案通常是找到一个现有的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
}); // $(
当鼠标越过较小的图像，较大的一个被创建盘旋在它，并在适当位置立即膨胀。当鼠标离开所述较大图像，它收缩并消失。
您需要一个执行以下操作的函数：
- 用户将鼠标悬停在图像上
- 函数调用 CLONE ($(this).clone()...) 图像，并且绝对位置与基础图像完全相同，但在顶部有一层（稍后在 DOM 中的某个位置渲染克隆元素）
- 在克隆图像上制作动画
- 悬停关闭时，反转动画，然后完全删除克隆的元素。（。消除（））
很简单。其他元素将保持不变并且不会移动。
我通过设置原点得到一个稍好的结果到左上角，而不是顶部中心。
但除此之外，它是大致相同的。这里的东西给别人工作：
<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>
不隶属于 StackOverflow
