jqueryを使って、画像のズーム機能を実装します。

プラグインは不要！
↓以下が実際のソースサンプルです。

▼JavaScript

$(function () {

    $(window).mousemove(function (e) {


        if (e.pageX > $("#base").offset().left && e.pageX <= $("#base").offset().left + $("#base").width() && e.pageY >= $("#base").offset().top && e.pageY <= $("#base").offset().top + $("#base").height()) {

            var posX = e.pageX;
            var posY = e.pageY;

            if (e.pageX <= $("#base").offset().left + 16) {
                posX = $("#base").offset().left;
            } else if (e.pageX >= $("#base").offset().left + $("#base").width() - 16) {
                posX = $("#base").offset().left + $("#base").width() - 32;
            } else {
                posX -= 16;
            }

            // span要素が#base内に収まるよう調整（縦位置）
            if (e.pageY <= $("#base").offset().top + 10.75) {
                posY = $("#base").offset().top;
            } else if (e.pageY >= $("#base").offset().top + $("#base").height() - 10.75) {
                posY = $("#base").offset().top + $("#base").height() - 21.5;
            } else {
                posY -= 10.75;
            }
            $("span").css({
                "top": posY,
                "left": posX
            });
            $("span").show();
            $("#zoom img").css("top", ($("#base").offset().top - posY) * 20);
            $("#zoom img").css("left", ($("#base").offset().left - posX) * 20);

        } else {
            $("span").hide();
        }

    });
});

▼CSS