javascript - 1 つの画像のみを使用して画像を拡大する

Question

画像を拡大するという非常に単純な目的を達成しようとしています。ネットで検索したところ、ほとんどの js スクリプトで 2 つの画像が必要なようです (1 つはサムネイル サイズ用、もう 1 つは拡大サイズ用)。画像が 1 つしかないのですが、ズーム効果を達成することは可能ですか?

もちろん、無料版で、このリンクjQuery ImageZoomのようなものを1つの画像だけで実現したいと考えています。

Answer 1

私は最近Magnifier.jsを書きました。大きな画像を提供しない場合、代わりにサムネイルが使用されます

Answer 2

この目的のために複雑なコードを記述する必要はありません。これらの手順を考慮するだけで済みます。ガラス要素は50pxで50px、背景画像は500pxで500pxであると考えてください。これは、トリックを行うのに役立ちます)ポインタのオフセットを取得し、同時に拡大鏡の背景位置を変更する必要があります。jqueryコードは次のようになります

   $(".mpboxpic").mouseenter(function () {
    $("#zoombox").css({ "background": "url('" + $(this).attr("src") + "') no-repeat" })
    //با این کد تصویر پس زمینه دارای سایز یکسانی خواهد شد
    $("#zoombox").css({ "background-size": $(this).width() + "px " + $(this).height() + "px" })
}).mouseleave(function () {
    $("#zoombox").hide()
    var tg = $("#zoombox").css("background-image")
    px = 0;
    py = 0;
})
$(".mpboxpic").mousemove(function (p) {
    if (px==0) {
        $("#zoombox").fadeIn(200)
    }
    //با کد های زیر  مرکز دایره دقیقا در زیر موس قرار میگیرد
     px = p.pageX-$("#zoombox").height()/2
     py = p.pageY - $("#zoombox").width() / 2    
    $("#zoombox").css({ "top": py + "px", "left": px + "px", "position": "absolute" });
    var my = p.pageY - ($(this).offset().top + $("#zoombox").height() / 4)
    var mx = p.pageX - ($(this).offset().left + $("#zoombox").width() / 4)
    var coord = "-" + mx + "px " + " -" + my + "px"
    $("#zoombox").css({"background-position":coord})
})

とcss

    #zoombox{
display:none;
position:absolute;
border:5px solid rgba(248, 243, 243, 0.72);
top:25%;
left:25%;
z-index:5;
height:50px;
width:50px;
border-radius:100px;
pointer-events:none;
transform:scale(2);
}

その mpboxpic がメインの写真で、zoombox が拡大鏡としての html タグです。

<div id="zoombox">
</div>