이미지는 마우스의 위치에 따라 달라집니다.

Question

마우스 위치에 따라 이미지가 변경되는 방식 : 왼쪽, 왼쪽 위, 위쪽, 오른쪽 위, 오른쪽 아래, 오른쪽, 아래, 왼쪽 아래 및 클릭 .

여기 내가 뭘하려고 오전의 예는 다음과 같습니다

http://z6creation.net/fr/accueil

난에 유래에서 발견 유사한 항목과 장난 tryed했지만 내가 오른쪽, 왼쪽 얻을 수없는 것, 상단과 하단이 제대로 작동합니다 :

changing a image with mouse positions

을 heres 코드 내가 사용하고

> [jsfiddle][1] 
> 
> 
> [1]: http://jsfiddle.net/hhy5N/43/ 

Answer 1

js 파일을보고 어떻게하는지 확인할 수 있습니다. js 파일에 site.faces.js가 있습니다.

$.extend(Site, { 
    Faces: { 

     /* Attributes */ 

     center: { 
      'left': 0, 
      'top': 0 
     }, 
     config: { 
      'persons': ['eric', 'fabian', 'lievin', 'nicolas', 'pascale', 'fred'], 
      'nbpositions': 8 
     }, 
     currentImage: null, 


     /* Methods */ 

     angle: function (cursor) { 
      var angle = Math.atan2(0-cursor.y,0-cursor.x)*(180/Math.PI); 
      if(angle < 0) { angle += 360;} 
      return angle; 
     }, 


     distance: function(cursor) { 
      return Math.sqrt(Math.pow((0 - cursor.y),2) + Math.pow((0 - cursor.x),2)); 
     }, 


     setCenterFace: function() { 
      Site.Faces.center = $("#face").offset(); 
      if (parseInt($('#face').css('padding-top'))==0) { 
       Site.Faces.center.left += 720/2; 
       Site.Faces.center.top += 480/2; 
      } else { 
       Site.Faces.center.left += $("#face").width()/2; 
       Site.Faces.center.top += parseInt($('#face').css('padding-top'))/2; 
      } 
     }, 


     init: function(config) { 
      if (typeof config!='undefined') { 
       $.extend(this.config, config); 
      } 
      if (typeof this.config.person=='undefined') { 
       this.config.person = this.config.persons[Math.floor(Math.random()*this.config.persons.length)]; 
      } 
      /* 
       To force a face, use this... 
       this.config['person'] = 'fabian'; 
      */ 
      $('#face').addClass('face-'+this.config['person']); 
      if ($('html').hasClass('touch')) { 
       $('#face').css({ 
        'background-image': 'url('+Shin.href(';img/site/faces/'+this.config['person']+'.jpg')+')' 
       }); 
       $('.face-'+this.config['person']).fadeIn(); 
       $(window).resize(function(){ 
        var bgPositionX = '0px'; 
        if ($('#face').css('padding-top')!='0px') { 
         bgPositionX = "center"; 
        } 
        $('#face').css('background-position', bgPositionX+' 0px'); 
       }); 
       $(window).resize(); 
      } else { 
       $(window).resize(function(){ 
        Site.Faces.setCenterFace(); 
        Site.Faces.showImage(9); 
       }); 
       Site.Faces.preloadImage(Shin.href(';img/site/faces/'+this.config['person']+'_mixed.jpg'), function() { 
        $(window).resize(); 
        var offset = null; 
        var cursor = { 
         x: 0, 
         y: 0 
        }; 
        $('body').mousemove(function(e) { 
         cursor.x = (e.pageX - Site.Faces.center.left); 
         cursor.y = (e.pageY - Site.Faces.center.top); 
         Site.Faces.manageImage(cursor, 'mousemove'); 
        }); 
        $('a, #face').bind('mousedown',function() { 
         Site.Faces.showImage(10) 
        }); 
       }); 
      } 
     }, 


     manageImage: function(cursor, event) { 
      if (event == 'mousemove') { 
       var centerDistance = 100 
       if ($('#face').css('padding-top')!='0px') { 
        centerDistance = 50 
       } 
       if (this.distance(cursor)<centerDistance) { 
        if(Site.Faces.currentImage != 9 && Site.Faces.currentImage != 10) { 
         Site.Faces.showImage(9); 
        } 
       } else { 
        var angleByPosition = 360/this.config['nbpositions']; 
        var numImage = Math.ceil((this.angle(cursor) + (angleByPosition/2))/angleByPosition); 
        numImage = (numImage>this.config['nbpositions'])?1:numImage; 
        if (Site.Faces.currentImage != numImage) { 
         Site.Faces.showImage(numImage);      
        } 
       } 
      } 
     }, 


     preloadImage: function(src, callback) { 
      var img = new Image(); 
      img.src = src; 
      img.onload = function() { 
       $('#face').css('background-image','url('+src+')'); 
       $('.face-'+Site.Faces.config['person']).fadeIn(); 
       if (typeof callback=="function") callback(); 
      }; 
     }, 


     showImage: function(num) { 
      Site.Faces.currentImage = num; 
      var height = (480*(10-num)); 
      var bgPositionX = '0px'; 
      if ($('#face').css('padding-top')!='0px') { 
       height = (200*(10-num)); 
       bgPositionX = "center"; 
      } 
      $('#face').css({ 
       backgroundPosition: bgPositionX+' -'+height+'px' 
      }); 
     } 

    } 
});