11548 sujets

JavaScript, DOM et API Web HTML5

A la recherche d'un petit plugin pour un effet de zoom au survol

Salut à tous, je viens de faire une recherche en long et en large sur le net mais malheureusement je n'arrive pas à trouver ce que je cherche, me voici donc Smiley rolleyes

En gros, l'idée est d'afficher une icone quelque part dans la page et que lorsqu'on la survole, qu'il y ait sur celle-ci un effet de zoom (de l'orde de 30 à 40%) afin de faire un focus sur cet élément (sans le flouter si possible).

Je pourrais réaliser cet effet avec le css3 mais dans un soucis de rétrocompatibilité avec les navigateurs ne supportant pas ce language, j'aimerai le réaliser en javascript.

Bref, connaitriez-vous un petit script ou un plugin fonctionnant avec jQuery (car ce dernier est déjà présent sur mon site) permettant de réaliser cet effet ?

D'avance, un grand merci Smiley cligne

Laurent
Modifié par LuciferX (17 Feb 2012 - 06:13)
désolé j'avais mal lu la question mon message est hors sujet !


Bonjour ,
essayes ce code ce plugin jquery :
http://iosif.chiriluta.ro/final/iZoom/
PS : j'ai modifié à l'époque le code : 

/*
     * author: iosif chiriluta
     * website:  www.iosif.chiriluta.ro
 
     * script version: 1.3
     * script link download:  http://iosif.chiriluta.ro/final/iZoom/iZoom.js
 
     * demo script:  http://iosif.chiriluta.ro/final/iZoom        
*/
(function($){
	$.fn.iZoom = function(options){
        options = $.extend({
                         'diameter':150,
                         'borderColor':'#ccc',
                         'borderWidth':'1px',
                         'borderStyle':'solid',
						 'imgPath':''
                    }, options || {});	   
		var $this = $(this); 
        var loupe = $this; 
        var wrpImage; 
        var lWidth; 
        var lHeight; 
        var sWidth; 
        var sHeight; 
		
		$this.each(function() {  // preload large images
			singleImage= $(this);
			image = new Image();
			image.src = options.imgPath+$this.attr('src');		
		
		
			singleImage.bind({
            mouseenter: function(e) {
        	myImage = $(this);
        	//myImage.css('cursor','crosshair'); 
                sWidth = myImage.width(); 
                sHeight = myImage.height(); 
						
                var lImage = new Image();
			    lImage.src = options.imgPath+myImage.attr('src');
                lWidth = lImage.width;
                lHeight = lImage.height;
                
                loupe = $('<div>').css({
               	    position: 'absolute',
                	width: options.diameter,
                	height: options.diameter,
                	'border-width': options.borderWidth,
                    'border-style':  options.borderStyle,
                    'border-color': options.borderColor,
                	overflow: 'hidden',
                	'z-index': '1000',
                	'-moz-border-radius': options.diameter/2,
                    '-khtml-border-radius': options.diameter/2,
                    'border-radius': options.diameter/2,
                	background: '#fff url('+lImage.src+') no-repeat'
                }).attr('id','iLoupe');				
                	
                $('body').append(loupe);
            },
            mousemove: function(e) {
            	myImage=$(this);
                var sxPointer = e.pageX - myImage.offset().left - parseInt(myImage.css('padding-left'));
                var syPointer = e.pageY - myImage.offset().top - parseInt(myImage.css('padding-top'));
                
                loupe.css({
                	left: e.pageX+10,
                	top: e.pageY+10
                });
                
                var sxPointerPer = sxPointer/sWidth*100;
                var syPointerPer = syPointer/sHeight*100;
                sxPointerPer = Math.round(sxPointerPer*Math.pow(10,10))/Math.pow(10,10);
                syPointerPer = Math.round(syPointerPer*Math.pow(10,10))/Math.pow(10,10);
                
                var sXPointer = Math.round(((sxPointerPer/100*lWidth)*Math.pow(10,0))/Math.pow(10,0));
                var sYPointer = Math.round(((syPointerPer/100*lHeight)*Math.pow(10,0))/Math.pow(10,0));
                
                (sxPointer>=0 && sxPointer<=sWidth && syPointer>=0 && syPointer<=sHeight) ? loupe.css({"background-position" [decu]-sXPointer+options.diameter/2)+"px "+(-sYPointer+options.diameter/2)+"px"}) : false;
            },
            mouseleave: function() {
                loupe.stop(true, true).fadeOut(300, function() {
					loupe.remove();
				});
            }             
        });
		});
	};	
})(jQuery);

Modifié par qualithras (23 May 2012 - 11:40)
Sujet clos
Aller à