3

サイトのブックマーク機能を作成しようとしているので、誰かが「ブックマークの設定」をクリックしてからテキスト行をクリックすると、ブックマーク画像がその行の左側に配置されます。(その後、coor を Cookie に保存しますが、助けなしでそれを行うことができます)

私が考えた 1 つの方法は、ユーザーが段落内のテキスト行をクリックしたときに、ユーザーがクリックした場所の Y 座標を取得し、その数値を 20 で割り切れる最も近い数値に切り捨てさせることでした。各段落の高さは 20 ピクセルなので、Y 座標を切り捨てると、クリックした段落内のその 1 行の一番上の位置が得られます。

したがって、次のようになると思います: 誰かが段落内のテキスト行をクリックすると、その段落のインデックスが取得されるため、ページの下の 4 番目の P である場合、インデックスは 3 になり、次のようになります。ユーザーがクリックした場所の Y 座標、次にその数値を 20 で割り切れる最も近い数値に切り捨て、画像をその段落の左側に配置し、画像の TOP 位置を丸めた Y 座標にします。

誰でもこれで私を助けることができますか? あなたが見ることができるように、私はちょっと迷っています：

$('p').click(function(e) {
    var myIndex = $(this).index()
    var myIndexTop = myIndex.top()
    var myIndexLeft = myIndex.left()

    var offset = $(this).offset();
    var y = e.pageY - this.offsetTop;

    $('.bookMarkImg')
        .left(myIndexLeft)
        .top('round down to nearest num thats divisible by 20)
OR?     
    $('.bookMarkImg')
        .css({'left': myIndexLeft, 'top' 'round down to nearest num thats divisible by 20'})
})
4

1 に答える 1

3

最も近い 20 に切り捨てるには、次のようにします。

y = Math.floor(y / 20) * 20;

また、存在.top()し.left()ません: あなたが望むでしょう:

  • $(this).offset().topそして$(this).offset().left位置を取得するために
  • .css({left: ..., top: ...})それらを設定するため

もう 1 つのことは、クリックする場所に応じて、これらのブックマーク イメージの 1 つだけを浮かび上がらせたい場合は、おそらく水平 (最後) に配置し、絶対に配置する必要があるため、無料です<img>。<body>ドキュメント全体を移動します。y次に、段落のオフセットを座標から差し引く必要はありません。

サンプルコード:

$('p').click(function (e) {
    var offset = $(this).offset();
    var top = Math.floor(e.pageY / 20) * 20;

    $('.bookMarkImg').css({
        left: offset.left,
        top: top
    }).show();
});

実際のデモを参照してください: http://jsfiddle.net/upgBa/

注：ただし、段落と本文にあるパディング/マージン/境界線を考慮する必要がある場合があります。これにより、計算が失敗する可能性があります（これらの「上部」部分を差し引くだけです）。

于 2011-01-23T06:51:13.790 に答える