Quelqu'un sait-il d'un plugin jQuery qui peut faire quelque chose comme ceci: http://www.pronovias.com/

Quelqu'un sait-il d'un plugin jQuery qui peut faire quelque chose comme ceci: http://www.pronovias.com/Quelqu'un sait-il d'un plugin jQuery qui peut faire quelque chose comme ceci: http://www.pronovias.com/

Je veux dire quand je planez dessus tout en glissant des images. Je veux faire un zoom avant et un zoom arrière. si n'existe pas le plugin comme ceci, comment j'écris?

c'est ce que j'ai fait. peut-on remplacer avec le bon avec le support?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script type="text/javascript" src="jquery-1.4.2.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    setInterval(function(){ 
     var currentPhoto=$('#photoShow .current'); 
     var nextPhoto=currentPhoto.next('div').addClass('next'); 
     if (nextPhoto.length==0) 
      nextPhoto=$('#photoShow div:first').addClass('next'); 
     $('#photoShow .current').animate({'opacity':0},1000, function(){ 
     nextPhoto.addClass('current'); 
     nextPhoto.removeClass('next'); 
     currentPhoto.css('opacity', 1) 
     currentPhoto.removeClass('current'); 
     }); 
    },2000); 
    $('#photoShow img').hover(
     function(){ 
      $(this).stop().animate({left:'-=4', width:'+=8', height:'+=8'}); 
      }, 
     function(){ 
      $(this).stop().animate({left:'+=4', width:'-=8', height:'-=8'}); 

      }); 

}); 


</script> 


<style type="text/css"> 
<!-- 
*{margin:0; padding:0;} 
img{ border:none; 
cursor:pointer;} 



#photoShow div{ 
    position:relative; 
    visibility:hidden; 
} 
#photoShow img{ 
position:absolute; 
    z-index: 0; 

} 
#photoShow .current { 
    z-index: 2; 
    visibility:visible; 
} 
#photoShow .next { 
    z-index: 1; 
     visibility:visible; 
} 


--> 
</style> 
</head> 

<body> 
<div id="photoShow"> 
    <div class="current"><img src="gelinlik1.jpg" /></div> 
    <div><img src="gelinlik2.jpg" /></div> 
    <div><img src="gelinlik3.jpg" /></div> 
    <div><img src="gelinlik4.jpg" /></div> 
     <a href="#" style="visibility:hidden;"></a> 
    </div> 

</body> 
</html>

Source

2010-08-01 beratuslu

Ce site utilise Flash. Il peut ne pas être possible de le faire dans jQuery d'une manière qui fonctionne sur tous les navigateurs que vous devez prendre en charge. –

Non, j'écris un code jQuery très étroitement, mais pas l'effet exact. – beratuslu

Il est certainement possible de le faire et je suis certain que je l'ai vu quelqu'un déjà écrire un plugin pour cela, je ne peux pas sembler se rappeler où il était. Pour vous aider à démarrer sur la route du plugin, vous devez décider ce que le plugin doit faire et ensuite, quelles devraient être les options.

Jusqu'à présent, nous savons que le plugin doit -

Zoom sur mouseenter
Combien faut-il zoomer?
L'image doit-elle rester centrée tout au long du zoom?
À quelle vitesse l'image doit-elle être agrandie?
Zoom sur mouseleave
en utilisant les mêmes paramètres de vitesse Zoom.
devrait revenir à la taille de l'image originale.

Dans cet esprit, les choses que vous devez penser.

Si l'on augmente simplement la largeur et la hauteur d'une image, la largeur et la hauteur grandiront dans la fenêtre, mais ce que nous voulons vraiment faire est de limiter la largeur et la hauteur de ce qu'il est à la page charge et ont l'image devient plus grande dans ces limites. Comment pourrions-nous y aller?
Lorsque nous effectuons un zoom, devrions-nous changer la source du fichier d'image agrandie pour une version à plus haute résolution de l'image? Nous n'aurons peut-être pas besoin de faire cela pour les petits zooms, disons de 10 à 20%, mais voudrons peut-être le faire pour des pourcentages de zoom plus grands.

Du code pour vous aider à démarrer. Exécutez ceci sur cette page et observez ce qui arrive aux images

var imgs = $('img'); 
imgs.wrap('<div style="overflow:hidden;"></div>'); 

imgs.parent('div').each(function() { 
    var self = $(this), 
     img = self.find('img'); 
    self.height(img.height()); 
    self.width(img.width()); 
}); 

imgs.animate({ width: "+=10%", height: "+=10%"}, 2000);

Source

2010-08-01 11:05:58

Quelqu'un sait-il d'un plugin jQuery qui peut faire quelque chose comme ceci: http://www.pronovias.com/

Répondre

Questions connexes