Div跟随鼠标中心

时间:2016-11-14 11:14:57

标签: javascript jquery zoom magnify

我正在尝试使用它来跟随我的光标并放大我正在盘旋的一个小区域。 http://jsfiddle.net/wwwrha04/

这是JS

(function($) {

    $(document).ready(function() {
        var scale = 2;

        var $magnifyingGlass = $('<div class="magnifying_glass"></div>');
        var $magnifiedContent = $('<div class="magnified_content"></div>');
        var $magnifyingLens = $('<div class="magnifying_lens"></div>');

        //setup
        $magnifiedContent.css({
            backgroundColor: $("html").css("background-color") || $("body").css("background-color"),
            backgroundImage: $("html").css("background-image") || $("body").css("background-image"),
            backgroundAttachment: $("html").css("background-attachment")  || $("body").css("background-attachment"),
            backgroundPosition: $("html").css("background-position") || $("body").css("background-position")
        });


        $magnifiedContent.html($(document.body).html());

        $magnifyingGlass.append($magnifiedContent);
        $magnifyingGlass.append($magnifyingLens); //comment this line to allow interaction
        $(document.body).append($magnifyingGlass);

        //funcs
        function updateViewSize() {
            $magnifiedContent.css({width: $(document).width(), height: $(document).height()});
        }

        //begin
        updateViewSize();

        //events
        $(window).resize(updateViewSize);

        $magnifyingGlass.mouseover(function(e) {
            e.preventDefault();
            $(this).data("drag", {mouse: {top: e.pageY, left: e.pageX}, offset: {top: $(this).offset().top, left: $(this).offset().left}});
        });

        $(document.body).mousemove(function(e) {
            if ($magnifyingGlass.data("drag")) {
                var drag =$magnifyingGlass.data("drag");

                var left = drag.offset.left + (e.pageX-drag.mouse.left);
                var top = drag.offset.top + (e.pageY-drag.mouse.top);

                $magnifyingGlass.css({left: left, top: top});
                $magnifiedContent.css({left: -left*scale, top: -top*scale});

            }
        }).mouseup(function() {
            $magnifyingGlass.removeData("drag");
        });
    });

    })(jQuery);

我可以做些什么来确保我的光标粘在放大的Div的中心?当光标进入浏览器时,如何让它跳转到光标?

或者有没有人有更好的方法来创建这个功能?我只能找到图像放大镜,我需要能够放大任何元素。

0 个答案:

没有答案