Java腳本圖像懸停效果

Question

我想獲得這個所需的懸停圖像效果？

http://www.colingrist.com/

我想知道是否有人知道的代碼？ 當您懸停圖片時，它會移動。 在此先感謝。

Answer 1

看看這個:)你當然需要jQuery庫

http://jsfiddle.net/yFMeJ/

jQuery("#banner").mousemove(
     function(e){ 
      /* Work out mouse position */ 
      var offset = jQuery(this).offset(); 
      var xPos = e.pageX - offset.left; 
      var yPos = e.pageY - offset.top; 

      /* Get percentage positions */ 
      var mouseXPercent = Math.round(xPos/jQuery(this).width() * 100); 
      var mouseYPercent = Math.round(yPos/jQuery(this).height() * 100); 

      /* Position Each Layer */ 
      jQuery(this).children('img').each(
       function(){ 
        var diffX = jQuery('#Parallax').width() - jQuery(this).width(); 
        var diffY = jQuery('#Parallax').height() - jQuery(this).height(); 

        var myX = diffX * (mouseXPercent/1500); //)/100)/2; 


        var myY = diffY * (mouseYPercent/1080); 


        var cssObj = { 
         'left': myX + 'px', 
         'top': myY + 'px' 
        } 
        //jQuery(this).css(cssObj); 
        jQuery(this).animate({left: myX, top: myY},{duration: 50, queue: false, easing: 'linear'}); 

       } 
      ); 

     } 
    ); 

Answer 2

How do I view source of a webpage?

// Paralax Homepage Banner 

    jQuery("#banner").mousemove(
     function(e){ 
      /* Work out mouse position */ 
      var offset = jQuery(this).offset(); 
      var xPos = e.pageX - offset.left; 
      var yPos = e.pageY - offset.top; 

      /* Get percentage positions */ 
      var mouseXPercent = Math.round(xPos/jQuery(this).width() * 100); 
      var mouseYPercent = Math.round(yPos/jQuery(this).height() * 100); 

      /* Position Each Layer */ 
      jQuery(this).children('img').each(
       function(){ 
        var diffX = jQuery('#Parallax').width() - jQuery(this).width(); 
        var diffY = jQuery('#Parallax').height() - jQuery(this).height(); 

        var myX = diffX * (mouseXPercent/1500); //)/100)/2; 


        var myY = diffY * (mouseYPercent/1080); 


        var cssObj = { 
         'left': myX + 'px', 
         'top': myY + 'px' 
        } 
        //jQuery(this).css(cssObj); 
        jQuery(this).animate({left: myX, top: myY},{duration: 50, queue: false, easing: 'linear'}); 

       } 
      ); 

     } 
    ); 

http://www.colingrist.com/wp-content/themes/mill/scripts/functions.js