La prevención de reflujo cuando se usa jQuery UI efecto “tamaño”
https://stackoverflow.com/questions/1671633
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Tengo una lista de imágenes como esta:
<ul class='blah'>
<li><img src='...' /></li>
<li><img src='...' /></li>
<li><img src='...' /></li>
<li><img src='...' /></li>
</ul>
Y lo tengo estilo para mostrar como una lista horizontal, sin puntos de bala. Un poco de como lo que ves en GitHub para los seguidores (ver http://github.com/chrislloyd ). Estoy usando jQuery y jQuery UI para hacer estas imágenes más grandes cuando el usuario pasa el ratón sobre ella. Aquí está el código que tengo hasta ahora:
$(".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' });
});
Esto funciona bien mientras se está animando, pero una vez que una imagen alcanza su tamaño máximo las otras imágenes de reflujo (salirse del camino). Alguna idea de cómo hacer esto sin reflujo de algo?
He intentado variaciones de 'position: absolute;', 'position: relative', etc. en las imágenes y el recipiente (el <ul>) pero realmente no hace ninguna diferencia
Solución
Usted podría intentar algo como:
var pos = $(this).position();
$(this).css({ position: "absolute",
top: pos.top, left: pos.left, zindex:10 });
Esto evitará que la imagen de empujar a los demás pero en cierto modo tiene el problema opuesto a 'chupar' los otros en ya que está siendo colocado fuera del camino.
No es un buen ejemplo aquí de utilizar jQuery para lograr un efecto similar.
Este ejemplo utiliza los elementos de la lista de tipo de reservar el espacio para las imágenes. Flotamos los elementos de la lista a la izquierda y el espacio fuera posicionándolos 'relativo' y darles un tamaño explícito. A continuación, las imágenes se colocan 'absoluto' en el elemento de la lista. Ahora cuando usamos jQuery para cambiar el tamaño de nuestras imágenes, las otras imágenes no re-flujo desde el elemento de lista está actuando como un marcador de posición.
El ejemplo también utiliza animar en lugar de effect.size para un poco efecto limpiador.
Espero que esto ayude. Buena suerte.
Otros consejos
Aquí está mi intento. Me puse los elementos de la lista para ser posicionados con respecto a mantener las imágenes con posición absoluta. Esto parece funcionar según lo especificado. El único problema es cuando se desliza sobre todos ellos de forma rápida, todos ellos animados. Yo supongo que te gustaría añadir algo ahí para que sea uno que sólo cambia el tamaño a la vez.
<!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>
Si se utiliza la función 'animado' de jQuery en lugar de "efecto", que funciona muy bien (que no retorno). He probado el siguiente código en Firefox 3, Chrome e IE 8, y en todos los casos nada reflowed. Aquí está la función:
$(".blah img").hover(
function() {
$(this).animate( {'width': 64, 'height': 64 });
},
function() {
$(this).animate( {'width': 32, 'height': 32 });
});
Y aquí está la página completa utilicé para probar la función:
<?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>
La respuesta fácil es por lo general para encontrar un plugin de jQuery existente que ya hace lo que quiere. Hay un montón de ellos por ahí, e incluso si uno no es perfecto se puede adaptar o aprender de ella para obtener el resultado deseado.
Para hágalo usted mismo, me gustaría sugerir que tienen dos copias de la imagen: una línea con la lista, y otra en la parte superior que se acerca esa manera la disposición de la lista no depende de la imagen ampliada en absoluto. .
código no probado, solo pensamiento:
// 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
}); // $(
Cuando el ratón pasa sobre la imagen, más pequeño, el más grande se crea cierne sobre él, y se expande de inmediato en el lugar. Cuando el ratón sale de la imagen más grande, se contrae y luego desaparece.
Se necesita una función que hace lo siguiente:
- usuario se desplaza sobre la imagen
- Las llamadas a funciones para clonar ($ (this) .clone () ...) la imagen y absolutamente posición en exactamente el mismo lugar como imagen de base, pero una capa en la parte superior (generar el elemento clonado posteriormente en el DOM)
- Haga su animación en la imagen clonada
- En vuelo estacionario fuera, revertir la animación, a continuación, retire el elemento clonado por completo. (.Remove ())
Muy simple. Los otros elementos permanecerán intactos y no moverse.
Me dieron un resultado ligeramente mejor estableciendo el origen de arriba a la izquierda en lugar de la parte superior central.
Pero por lo demás se trata de la misma. Aquí hay algo para que otros trabajen en:
<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>
