1

写真のズーム効果を作成しています

    <table>
     <tr>
      <td><img class='source-img' src='a.png' ></td>
         20 more same TDs
     </tr>
       20 more TRs
    </table>

<div id="magnifier" style="position:absolute;"></div>

1- ズームが正常に行われました 2- 拡大鏡の上部/左に問題があり、拡大鏡を source-img の右側に配置しました。

 $("source-img").mousenter(function(){
   $("#magnifier").css({
     top: $(this).top,
     left:$(this).offset().left()+$(this).width()+5//to improve left value
   });
 });

問題: source-img がブラウザーの一番左にある場合、source-img の右側に拡大鏡を表示したい、またはその逆の場合、現在、一番左の source-img 拡大鏡に bcz が表示されますが、表示されません。

4

1 に答える 1

2

拡大鏡要素の位置とウィンドウの幅に対する幅をテストし、それに応じて左の位置を調整する必要があります。以下のサンプル疑似コードは、途中で役立つはずです。

$(".source-img").mouseenter(function(e) {
    var w = $(window),
        elWidth = $(this).width(),
        offset = $(this).offset(),
        left;

    if (elWidth + e.pageX > w.width() + w.scrollLeft()) {
        left = e.pageX - elWidth;
    } else {
        left = e.pageX;
    }

    $("#magnifier").css({
        top: offset.top,
        left: left
    });
});

必要に応じて拡大鏡をウィンドウの端から離して配置するために、追加の設定を適用して拡大鏡の所定のマージンを設定することができます。

于 2012-10-10T04:15:09.763 に答える