3

我正在尝试为我的网站创建书签功能，因此当有人单击“设置书签”然后单击一行文本时，它将在该行的左侧放置一个书签图像。（然后我会将 coor 保存到 cookie 中，但我可以在没有帮助的情况下做到这一点）

我想到的一种方法是当用户单击段落中的一行文本时，让它抓取用户单击位置的 Y 坐标，然后将该数字向下舍入为可被 20 整除的最接近的数字。每个段落的高度是 20px，所以如果你向下舍入 Y 坐标，那么你会得到他们点击的段落内单行的顶部位置。

所以我认为它会是这样的：当有人点击段落中的一行文本时，它会得到该段落的索引，所以如果它是页面下方的第 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: ...})用于设置它们

另一件事是，如果您只希望这些书签图像中的一个浮动，具体取决于您单击的位置，那么您可能<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 回答