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

尝试使用鼠标悬停（在鼠标悬停时更改鼠标移动）

jQuery放大了在Chrome和Safari中无法使用的功能

1 个答案: