javascript - jQuery 放大在 Chrome 和 Safari 中不起作用，但在 Firefox 中不起作用

Question

您好，我已经尝试在我的网站上实现一个 jquery 放大代码。我将它与用于视差滚动的 .skrollr javascript 结合起来。它在 firefox 中运行良好，但在 chrome 和 safari 中似乎根本不起作用。

您可以在以下位置查看该网站: https://dl.dropboxusercontent.com/u/209428711/Test-content-site/index.html

放大功能的java是

<script src="javascripts/prefixfree.min.js" type="text/javascript"></script>
<script src="javascripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){

    var native_width = 0;
    var native_height = 0;

    $(".magnify").mousemove(function(e){

        if(!native_width && !native_height)
        {

            var image_object = new Image();
            image_object.src = $(".small").attr("src");

            native_width = image_object.width;
            native_height = image_object.height;
        }
        else
        {

            var magnify_offset = $(this).offset();

            var mx = e.pageX - magnify_offset.left;
            var my = e.pageY - magnify_offset.top;

            if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
            {
                $(".large").fadeIn(100);
            }
            else
            {
                $(".large").fadeOut(100);
            }
            if($(".large").is(":visible"))
            {

                var rx = Math.round(mx/$(".small").width()*native_width - $(".large").width()/2)*-1;
                var ry = Math.round(my/$(".small").height()*native_height - $(".large").height()/2)*-1;
                var bgp = rx + "px " + ry + "px";

                var px = mx - $(".large").width()/2;
                var py = my - $(".large").height()/2;

                $(".large").css({left: px, top: py, backgroundPosition: bgp});
            }
        }
    })
})
</script>

非常感谢所有帮助:)如果您对网站有任何疑问，我可以尽力解答。

和平

Answer 1

尝试使用mouseover(在鼠标悬停时更改mousemove)