La prévention refusion lors de l'utilisation de jQuery UI « taille » effet
https://stackoverflow.com/questions/1671633
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
J'ai une liste d'images comme ceci:
<ul class='blah'>
<li><img src='...' /></li>
<li><img src='...' /></li>
<li><img src='...' /></li>
<li><img src='...' /></li>
</ul>
Et je l'ai style pour afficher une liste horizontale sans points de balle. Un peu comme ce que vous voyez sur GitHub pour les adeptes (voir http://github.com/chrislloyd ). J'utilise jQuery et jQuery UI pour rendre ces images plus grandes lorsque l'utilisateur passe sa souris dessus. Voici le code que j'ai à ce jour:
$(".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' });
});
Cela fonctionne bien pendant qu'il anime, mais une fois une image atteint sa taille maximale l'autre refusion images (déplacement de la route). Toute idée comment faire cela sans refusion quoi que ce soit?
J'ai essayé des variations de 'position: absolute;', 'position: relative', etc. sur les images et le conteneur (le <ul>), mais il n'a pas fait vraiment une différence
La solution
Vous pouvez essayer quelque chose comme:
var pos = $(this).position();
$(this).css({ position: "absolute",
top: pos.top, left: pos.left, zindex:10 });
Cela permet de garder l'image de pousser les autres, mais il a en quelque sorte le problème inverse de « sucer » les autres en car il est placé hors de la voie.
Il y a un très bon ici d'utiliser jQuery pour obtenir un effet similaire.
Cet exemple utilise les éléments de la liste pour réserver sorte de l'espace pour les images. Nous flottons les éléments de la liste de gauche et les espacer en les positionnant « relative » et en leur donnant une taille explicite. Ensuite, les images sont placées « absolue » dans l'élément de liste. Maintenant, lorsque nous utilisons jQuery pour redimensionner nos images, les autres images ne sont pas refusion depuis l'élément de liste fonctionne comme un espace réservé.
L'exemple utilise également animer plutôt que effect.size pour un peu d'effet nettoyant.
Espérons que cela aide. Bonne chance.
Autres conseils
Voici ma tentative. Je mets les éléments de liste à positionner par rapport à tenir les images en position absolue. Cela semble fonctionner comme indiqué. Le seul problème est lorsque vous glissez sur tous rapidement, ils sont tous animés. Je suppose que vous voudriez ajouter quelque chose là-dedans pour le faire qu'une seule redimensionne à la fois.
<!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 vous utilisez le « Animer » fonction de jquery au lieu de « l'effet, » il fonctionne très bien (il ne redistribue pas). J'ai essayé le code suivant dans Firefox 3, Chrome et IE 8 et dans tous les cas rien refusion. Voici la fonction:
$(".blah img").hover(
function() {
$(this).animate( {'width': 64, 'height': 64 });
},
function() {
$(this).animate( {'width': 32, 'height': 32 });
});
Et voici la pleine page je pour tester la fonction:
<?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 réponse facile est généralement de trouver un plugin jQuery existant qui fait déjà ce que vous voulez. Il y a beaucoup d'entre eux là-bas, et même si l'on est pas parfait, vous pouvez adapter ou apprendre à obtenir le résultat souhaité.
Pour ce faire vous-même, je vous suggère d'avoir deux copies de l'image: une en ligne avec la liste, et une autre sur le dessus qui fait un zoom de cette façon la mise en page de la liste ne dépend pas de l'image zoomée du tout. .
code non testé, juste penser:
// 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
}); // $(
Lorsque la souris passe au-dessus de la plus petite image, l'une plus grande est créé planant au-dessus, et se développe immédiatement en place. Lorsque la souris quitte l'image, il se rétrécit, puis disparaît.
Vous avez besoin d'une fonction qui effectue les opérations suivantes:
- L'utilisateur plane sur l'image
- Fonction appelle à CLONE ($ (this) .clone () ...) l'image et tout à fait position exactement au même endroit que l'image de base, mais une couche sur le dessus (rendre l'élément cloné quelque part plus tard dans les DOM)
- Faites votre animation sur l'image clonée
- En vol stationnaire hors tension, inversez l'animation, puis retirez l'élément cloné complètement. (.Remove ())
Assez simple. Les autres éléments restent intacts et ne pas bouger.
Je suis un résultat légèrement mieux en mettant l'origine en haut à gauche au lieu du centre supérieur.
Mais sinon il est peu près la même. Voici quelque chose pour les autres à travailler sur:
<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>
