根據鼠標位置改變圖像

Question

如何根據鼠標位置實現圖像更改：左，左上，上，右上，右，右下，底部，左下和點擊。

這裏是什麼，我試圖做一個例子：

http://z6creation.net/fr/accueil

我已經tryed玩弄類似的話題我就發現了計算器，但我似乎無法得到左，右，頂部和底部的正常工作：

changing a image with mouse positions

繼承人的代碼我一直在使用

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

Answer 1

你可以通過查看他的js文件來了解他是如何做到這一點的。他有一個名爲site.faces.js的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' 
      }); 
     } 

    } 
});