Question

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

我想到的一种方法是当用户点击段落中的一行文字时，让它抓住用户点击的地方的Y坐标，然后将该数字向下舍入到最接近的数字20可被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'})
})

Answer 1

向下舍入到最接近的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/

注意：您可能必须考虑段落和正文上的任何填充/边距/边框，这可能会导致计算失败（只需减去这些中的“顶部”部分）。

Jquery：显示单击的行旁边的图像

1 个答案: