Javascript图像悬停效果[关闭]答案

【问题标题】：Java script image hover effect [closed]Javascript图像悬停效果[关闭]
【发布时间】：2013-08-02 22:59:34
【问题描述】：

我想要获得这种想要的悬停图像效果？

http://www.colingrist.com/

我想知道是否有人知道代码？当您悬停图像时，它会移动。提前致谢。

【问题讨论】：

StackOverflow 不是“免费代码”网站。你应该问你在解决问题时遇到的问题。
天哪，这也是个骗子！ jQuery image hover effect

标签： javascript css

【解决方案1】：

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

【讨论】：

非常好的问题......你比我早了三纳秒！干得好。
@Lance 幸好它是 Wordpress，而不是一个带有缩小/压缩 JS 的真实网站！ ;-)
这不是公认的答案吗？！
我确实对你投了反对票。我认为我们不应该帮助人们提出这类问题。这也可以是评论。
@Mohsen 我同意你的观点，我很惊讶这个问题还没有结束。

【解决方案2】：

看看这个 :) 你当然需要 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'});

                }
            );

        }
    );

【讨论】：